我对Three.js很陌生,我只是想让一些文本可以渲染。 通过查看此代码,有人可以告诉我我做错了吗?

我喜欢通过加载程序加载.json文件,但是在浏览器中查看页面时似乎什么也没得到。

<body>

    <canvas id="myCanvas"></canvas>

    <script src="js/three.js"></script>
    <script type="text/javascript" src="js/helvetiker_regular.typeface.json"></script>
    <script>
        var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
        renderer.setClearColor(0x00ff00);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        var camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 3000);

        var scene = new THREE.Scene();

        var light = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(light);

        var light1 = new THREE.PointLight(0xffffff, 0.5);
        scene.add(light1);

        var loader = new THREE.FontLoader();

        loader.load( 'js/helvetiker_regular.typeface.json', function ( font ) {

            var geometry = new THREE.TextGeometry( 'Hello three.js!', {
                font: font,
                size: 80,
                height: 5,
                curveSegments: 12,
                bevelEnabled: true,
                bevelThickness: 10,
                bevelSize: 8,
                bevelSegments: 5
            } );
        } );

        var material = new THREE.MeshLambertMaterial({color: 0xF3FFE2});
        var mesh = new THREE.Mesh(geometry, material);
        mesh.position.set(0, 0, -1000);

        scene.add(mesh);

        requestAnimationFrame(render);

        function render() {

            mesh.rotation.x += .01;
            mesh.rotation.y += .01;

            renderer.render(scene, camera);
            requestAnimationFrame(render);
        };

    </script>
</body>

#1楼 票数:0 已采纳

加载程序是异步的,加载完成后会触发您调用的函数(回调)。 将您的网格物体创建移动到回调中,这将对其进行修复。

loader.load( 'js/helvetiker_regular.typeface.json', function ( font ) {

    var geometry = new THREE.TextGeometry( 'Hello three.js!', {
        font: font,
        size: 80,
        height: 5,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 10,
        bevelSize: 8,
        bevelSegments: 5
    } );

    var material = new THREE.MeshLambertMaterial({color: 0xF3FFE2});
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, -1000);

    scene.add(mesh);
} );

PS您可能不需要此行:

<script type="text/javascript" src="js/helvetiker_regular.typeface.json"></script>

加载程序将自行下载文件。

  ask by Justmatt translate from so

未解决问题?本站智能推荐:

1回复

React Three.js .GLTF 烘焙纹理未出现在模型上

我有一个简单的场景,包括一个带有月球漫反射和凹凸纹理的球体模型,它们被烘焙到“.GLTF 文件”中。 我用GLTFJSX导入了模型,但只出现了模型。 我打开了灯,但这似乎并没有解决问题。 我把这个完全相同的模型放在另一个场景中,纹理加载得很好。 问题沙箱: https : //codesandbo
2回复

OBJ文件未出现在浏览器WebGL Three.js中

我有一个obj文件,我想尝试使用Three.js进行Three.js 。 我一直在尝试从Web上获取尽可能多的有关如何实现此目标的信息,我的研究使我开始使用以下脚本,但是我所看到的只是黑屏,控制台中没有错误消息。 实际上,控制台中唯一的输出是来自LoaderManager ,似乎是在说对
2回复

如何在三个js中制作三维文字

我通过引用这个文档编写了一个脚本, 这个文档是我的代码 我可以通过稍微改变代码来制作立方体和其他几何体。 但我不能使用这个脚本制作3D文本。 这个代码有什么问题吗? 请帮我
1回复

在三个JS中查看任意几何

我必须将csv文件中的3种不同类型的几何图形(立方体,直线和点)加载到场景中,并添加摄像头和灯光才能对其进行查看。 听起来很简单,但是我在场景中心努力地处理点和位置以收集点。 我正在寻找一些伪代码,该伪代码概述了无论几何形状如何都可以实现此目的的方法。 我已经使用多维数据集解决
1回复

无法在三个js中查看对象

想要在for循环内创建对象(多维数据集),然后将其输出到页面上的随机位置。 多维数据集似乎不确定为什么。 **信息:当我进行控制台日志时,多维数据集得到** -cube.js:24网格{uuid:“ 8859E918-7D3A-47ED-BDEF-072BC60FF725”,名
1回复

在三个JS中优化Obj加载

我正在尝试从三个JS OBJMTLLoader优化OBJ的加载。 我通过标准技术加载obj,并尝试通过克隆OBJ中的现有材料来应用ShaderMaterial。 这是正确的技术吗? 目的是通过GPU而不是使用CPU周期来加载OBJ。 我也尝试使用WebGL代码,但这需要时间。
1回复

在三个js中获取添加的相机

我有一个要add摄像机的对象car 。 现在如何通过此对象访问摄像机。 我已经试过了: 但我收到一条错误消息,说THREE.WebGLRenderer.render: camera is not an instance of THREE.Camera. 这是否有可能,还是我必须
1回复

三个js可以复用灯光吗?

每次加载 3d 模型时都必须指定三个 JS 灯吗? 在 Maya 等软件上完成渲染时,会完成灯光和相机配置。 有没有办法将其导出为 OBJ 文件的一部分? 如果我们可以重用相同的灯光配置,那么代码可以适用于每个 3d 模型,或者是否有一个默认的灯光配置适用于 90% 的 3d 模型?