Simple Cube - Three JS

Question

WebGL 용 Three.js 라이브러리를 통해 간단한 회전 3D 큐브를 만들려고 노력했습니다.

내 코드의 튜토리얼과 비교할 때 코드에서 오류를 식별 할 수없는 것처럼 보일 수 있습니다.하지만 표시되는 것은 모두 지오메트리가없는 검은 색 화면입니다.

//Define window size 
 
var width = window.innerWidth; 
 
var height = window.innerHeight; 
 

 
//smoothened edges for the renderer defined 
 
var renderer = new THREE.WebGLRenderer({antialias:true}); 
 
//renderer size 
 
renderer.setSize(width,height); 
 
//renderer is appended to the html document 
 
document.body.appendChild(renderer.domElement); 
 

 
var scene = new THREE.Scene; 
 

 
//Add Cube - width, height, depth 
 
var cubeGeom = new THREE.CubeGeometry(100,100,100); 
 
var cubeMaterial = new THREE.MeshLambertMaterial({color:0x1ec876}); 
 
var cube = new THREE.Mesh(cubeGeom,cubeMaterial); 
 

 
//Rotate cube 45 degrees 
 
cube.rotation.y=Math.PI*45/180; 
 

 
//Add cube to scene 
 
scene.add(cube); 
 

 
//Add Camera - FOV, Ratio, Close, Far 
 
var camera = new THREE.PerspectiveCamera(45,width/height,0.1,10000); 
 

 
//Position camera 
 
camera.position.y = 160; 
 

 
//Higher the z value, the closer to the camera/user 
 
camera.position.z = 400; 
 

 
//Camera pointed towards cube 
 
camera.lookAt(cube.position); 
 

 
//Add camera to scene 
 
scene.add(camera); 
 

 
//Define skyBox 
 

 
var skyBoxGeom = new THREE.CubeGeometry(10000, 10000, 10000); 
 
var skyBoxMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, side: THREE.BackSide }); 
 
var skyBox = new THREE.Mesh(skyBoxGeom,skyBoxMaterial); 
 

 
scene.add(skyBox); 
 

 
//Point Light 
 
var pointLight = new THREE.PointLight(0xffffff); 
 
pointLight.position.set(0,300,200); 
 
scene.add(pointLight); 
 

 
//Render scene 
 
function render() { 
 
    render.render(scene,camera); 
 

 
    var clock = new THREE.Clock; 
 

 
    //rotate cube clockwise - subtract time passed from rotation 
 
    cube.rotation.y -=clock.getDelta(); 
 

 
    requestAnimationFrame(render); 
 
} 
 

 
//Call render function 
 
render();

canvas { 
 
    position: fixed; 
 
    top:0; 
 
    left:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>

추신 Google 개발자 링크에있는 CDN을 통해 Three.js에 연결 중입니다. 여기에서 찾을 수 있습니다 : https://developers.google.com/speed/libraries/

도움이 될만한 의견을 보내주십시오.

많은 감사 톰

Answer 1

라인 55에서 당신의 JS 코드의 작은 오타가 :

render.render(scene,camera); 

가 있어야한다 :

renderer.render(scene,camera); 

다음에 나는 매우 개방을 추천하여 브라우저의 콘솔에서 오류가 이미 기록되었으므로 버그를 수정하는 것은 매우 간단했습니다.

---

게다가, 코드는 정상적으로 작동합니다. 큐브 은 매우 느리지 만으로 회전합니다. 라인 60을 더 빠르게 회전 시키려면 (예 : 값에 100을 곱한 값으로) 조정할 수 있습니다.