文字未出现在三个js中

Question

我对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>

Answer 1

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

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>

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