二十面體幾何體不呈現

我只是在學習如何做這個three.js的魔法。我可以繪製和製作一個立方體的動畫。但是當我將幾何變成二十面體時，什麼都沒有出現。二十面體幾何體不呈現

在我的js src forlder裏面我只有three.min.js文件。我需要另一個.js文件嗎？

這是我的代碼示例。我只是一個初學者，並且一直花費數小時的時間試圖解決這個問題。請幫忙。

<body> 
    <script src="js/three.min.js"></script> 
    <script> 
     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); 

     /*var geometry = new THREE.BoxGeometry(1,1,1); 
     var material = new THREE.MeshLambertMaterial({color: 0x00ff00}); 
     var cube = new THREE.Mesh(geometry, material); 
     scene.add(cube);*/ 

     var geometry = new THREE.IcosahedronGeometry(200,1); 
     var material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: false, wireframeLinewidth: 2 }); 
     var mesh = new THREE.Mesh(geometry, material); 
     scene.add(mesh); 

     var pointlight = new THREE.PointLight(0xffffff); 
     pointlight.position.x = 10; 
     pointlight.position.y = 50; 
     pointlight.position.z = 1000; 

     scene.add(pointlight) 

     camera.position.z = 5; 

     var render = function() { 
      requestAnimationFrame(render); 

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



      renderer.render(scene, camera); 
     }; 

     render(); 
    </script> 
</body>

來源

2014-09-25 fkgomez

你的相機是在對象內部。你有一個200的半徑。 – gaitat 2014-09-25 19:39:35

是。我是個白癡。謝謝 – fkgomez 2014-09-25 20:14:56

我知道這是一箇舊的帖子，但對於未來的訪問者來說，這裏是用現場代碼回答的問題。

我也繼續前進並清理了一下，並註釋了一些意見，以幫助指出我是如何解決您的問題的。

<body> 
 
    <script src="https://threejs.org/build/three.min.js"></script> 
 
    <script> 
 
    var scene = new THREE.Scene(); 
 
    var camera = new THREE.PerspectiveCamera(
 
     75, 
 
     window.innerWidth/window.innerHeight, 
 
     0.1, 
 
     1000 
 
    ); 
 
    camera.position.z = 5; 
 

 
    var pointlight = new THREE.PointLight(0xffffff); 
 
    pointlight.position.x = 10; 
 
    pointlight.position.y = 50; 
 
    pointlight.position.z = 1000; 
 

 
    scene.add(pointlight) 
 

 
    var renderer = new THREE.WebGLRenderer(); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    document.body.appendChild(renderer.domElement); 
 

 
    var mesh = new THREE.Mesh(
 
     // Notice radius decreased to 2 because it has to be smaller 
 
     // than camera.position. If camera is placed inside the mess, 
 
     // then we won't see it. 
 
     new THREE.IcosahedronGeometry(2, 0), 
 
     
 
     // I went ahead and added Phong shading in order to make result clearer 
 
     new THREE.MeshPhongMaterial({ 
 
     color: 0x156289, 
 
     emissive: 0x072534, 
 
     side: THREE.DoubleSide, 
 
     flatShading: true, 
 
     }), 
 
    ); 
 
     
 
    scene.add(mesh); 
 

 
    var render = function() { 
 
     requestAnimationFrame(render); 
 

 
     // fixed the rotation to reference your mesh 
 
     mesh.rotation.x += .01; 
 
     mesh.rotation.y += .01; 
 

 
     renderer.render(scene, camera); 
 
    }; 
 

 
    render(); 
 
    </script> 
 
</body>

來源

2017-09-26 10:20:07 maninak

二十面體幾何體不呈現

回答

相關問題