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);
} );

P.S。您可能不需要这一行：

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

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

文字没有出现在三个j中

1 个答案: