JavaScriptを使用した3次元立方体形状

私はwebglからこのコードを得ました。私は彼らのチュートリアルで言及したのと同じものを使用しましたが、ブラウザ画面では結果が得られません。私はキューブの3Dモデルを作成するためにthree.jsライブラリを使用しています。JavaScriptを使用した3次元立方体形状

<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>

出典

2017-04-10 Kamran Hassan

これはあなたの完全なコードですか？私はあなたが達成しようとしているものの完全なHTMLコンテキストを投稿した場合に役立つと思います。

しかし、私が最初に目にするのは、レンダリングターゲットをHTMLページに追加しないか、レンダリングするHTMLにあるキャンバスを使用しないことです。私はJavaScriptで初心者です

出典

2017-04-10 15:53:40 Alex

私はあなたを持っていなかったと私はHTMLで記事を編集し、私は忘れてしまった：

あなたのキューブが表示されますする最も簡単な方法は、で、あなたのページのDOMにレンダリングキャンバスを追加することです私はthree.jsライブラリを使用したことを言及してください –

まだ今働いている？それとも解決しましたか？ – Alex

JavaScriptを使用した3次元立方体形状

答えて

関連する問題