二十面体几何体不呈现

我只是在学习如何做这个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

二十面体几何体不呈现

回答

相关问题