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.WebGLRenderer 69。

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

Answer 1

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

TextGeometry没有显示，有谁可以告诉我为什么？

1 个答案: