TextGeometry 不显示，谁能告诉我为什么？

Question

我有以下 Three.js 代码：

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
       </style>
   </head>
   <body>
       <script src="js/three.min.js"></script>
       <script src="js/optimer_regular.typeface.js"></script>
       <script>
           //Basic Three components
           var scene = new THREE.Scene();
           var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight,       0.1, 1000 );

           var renderer = new THREE.WebGLRenderer();
           renderer.setSize( window.innerWidth, window.innerHeight );
           document.body.appendChild( renderer.domElement );
           //Let´s add a cube
           var geometry = new THREE.BoxGeometry( 1, 1, 1 );
           var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
           var cube = new THREE.Mesh( geometry, material );
           scene.add( cube );

           camera.position.z = 5;
           //Let´s add a text
           var material2 = new THREE.MeshPhongMaterial({
               color: 0x00ff00
           });
           var textGeom = new THREE.TextGeometry( 'Sitescope', {
               font: 'optimer',
               weight: 'normal' 
           });
           var textMesh = new THREE.Mesh( textGeom, material2 );
           scene.add( textMesh );
           //Render scene
           function render() {
               requestAnimationFrame( render );
               cube.rotation.x += 0.01;
               cube.rotation.y += 0.01;
               renderer.render( scene, camera );
           }
           render();
       </script>
   </body>

当我运行我的代码时，我的立方体呈现良好，但我的文本没有出现在任何地方。我在 javascript 控制台中得到的唯一输出是： THREE.WebGLRenderer69.

谁能告诉我为什么我的文字没有出现？（我是 Three.js 的初学者）谢谢！

Answer 1

当使用 THREE.MeshPhongMaterial() 时，场景中需要一盏灯。否则模型会变黑。如果您的场景背景也是黑色的，您将永远不知道模型是否已绘制。看看这个fiddle。我正在使用 THREE.MeshNormalMaterial()。用 PhongMaterial 替换它看看我在说什么。你可以看到文本被绘制成黑色只是因为它在绿色立方体上。

TextGeometry 不显示，谁能告诉我为什么？

TextGeometry not displaying, Could anyone tell me why?

javascript

three.js