三js自定義幾何

我想學習threeJS來構建一個3D webapp，其中我需要自定義3D幾何形狀。我找到了這樣做的代碼。但是，當我打開我的HTML文件時，瀏覽器不顯示任何內容。三js自定義幾何

這裏是我的代碼：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="container"></div> 
    <script src="Three.js"></script> 
    <script src="Detector.js"></script> 
    <script src="three.min.js"></script> 
    <script defer="defer"> 
     // revolutions per second 
     var angularSpeed = 0.2; 
     var lastTime = 0; 

     // this function is executed on each animation frame 
     function animate(){ 
     // update 
     var time = (new Date()).getTime(); 
     var timeDiff = time - lastTime; 
     var angleChange = angularSpeed * timeDiff * 2 * Math.PI/1000; 
     //geom.rotation.y += angleChange; 
     lastTime = time; 

     // render 
     renderer.render(scene, camera); 

     // request new frame 
     requestAnimationFrame(function(){ 
      animate(); 
     }); 
     } 

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

     // camera 
     var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000); 
     camera.position.z = 500; 

     // scene 
     var scene = new THREE.Scene(); 

     var geom = new THREE.Geometry(); 
     var v1 = new THREE.Vector3(-10,10,0); 
     var v2 = new THREE.Vector3(10,10,0); 
     var v3 = new THREE.Vector3(10,-10,0); 

     geom.vertices.push(new THREE.Vertex(v1)); 
     geom.vertices.push(new THREE.Vertex(v2)); 
     geom.vertices.push(new THREE.Vertex(v3)); 

     geom.faces.push(new THREE.Face3(0, 1, 2)); 
     geom.computeFaceNormals(); 

     var object = new THREE.Mesh(geom, new THREE.MeshNormalMaterial()); 
     //object.doubleSided = true; 
     object.overdraw = true; 
     scene.addObject(object); 

     animate(); 
    </script> 
    </body> 
</html>

請告訴我，如果有什麼問題的代碼。

來源

2013-06-28 Rahul Sharma

可能有多個錯誤。你可能想檢查你的控制檯。一些錯誤的來源可能是：

沒有THREE.Vertex。這已被THREE.Vector取代。請參閱Migration頁面。所以您應該只使用geom.vertices.push(v1)
再次請參閱遷移頁面。這是scene.add()而不是scene.addObject()

最後，在另一個功能包裝animate爲是多餘的。你可以直接通過animatefunction object：requestAnimationFrame(animate)

來源

2013-07-05 09:33:05

謝謝，明白了:) –

三js自定義幾何

回答

相關問題