자바 스크립트를 사용하여 3 차원 큐브 모양

나는이 튜토리얼에서 언급 한 것과 똑같은 것을 사용했지만, 브라우저 화면에서만 결과를 얻을 수 없다. 큐브 3D 모델을 생성하기 위해 three.js 라이브러리를 사용했습니다.자바 스크립트를 사용하여 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에서 렌더링 할 캔버스를 사용하지 않는 것입니다. 난 자바 스크립트와 안돼서 document.body.appendChild(renderer.domElement);

출처

2017-04-10 15:53:40 Alex

나는 당신을 가지고하지 않았고 난 HTML을 편집 한 게시물과 내가 잊었 :

큐브가 표시 얻을 수있는 가장 쉬운 방법은,로, 페이지의 DOM에 렌더링 캔버스를 추가하는 것입니다 나는 세 라이브러리를 사용했다 .js 라이브러리 –

아직도 일하고 있는가? 아니면 그것을 해결 했습니까? – Alex

자바 스크립트를 사용하여 3 차원 큐브 모양

답변

관련 문제