2017-04-10 142 views
3

我從webgl得到了這段代碼我用它和他們的教程中提到的一樣,但是我無法在我的瀏覽器屏幕上得到結果只能看到只是黑色背景而已。我已經使用three.js庫來創建立方體的三維模型。使用javascript的3D立方體形狀

<pre> 
      <!doctype html> 

      <html> 
     <head> 
     <meta charset="utf-8"> 
     <style> 
     canvas { width: 100%; height: 100% } 
     </style> 
     <title>Pryamid</title> 
     </head> 

<body> 

<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 cubegeometry = new THREE.CubeGeometry(1,1,1); 
     var cubematerial = new THREE.MeshBasicMaterial({wireframe: true, color: 0x000000}); 

     var cube = new THREE.Mesh(cubegeometry, cubematerial); 

     scene.add(cube); 

     camera.position.z = 5; 

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

      cube.rotation.y += 0.01; 
      cube.rotation.x += 0.01; 
      cube.rotation.z += 0.01; 

      renderer.render(scene, camera); 
     }; 

     // Calling the render function 
window.onload = function() { 
render(); 
}; 

</script> 
</body> 
</html> 

回答

4

這是您的完整的代碼?我認爲如果您發佈了您想要實現的完整HTML上下文會很有幫助。

但是,我第一眼看到的是,您要麼不將渲染目標添加到HTML頁面,要麼不使用HTML中的畫布進行渲染。

讓你的立方體顯示最簡單的方法,是通過將所呈現的畫布到你的頁面的DOM,有: ​​

+0

我沒有得到你,我是新手用JavaScript和我後期編輯HTML和我忘了提到我用three.js庫 –

+0

現在還在工作?還是它解決了它? – Alex