three.js가 렌더링되지 않습니다. requestAnimationFrame이 있어야합니까?

Question

제 2 장 - WebGL 가동 및 실행 도서에서 예제를 수행하고 있습니다.

정적 텍스처 매핑 큐브를 표시하려고합니다.

이 코드는 작동하지 않습니다

var camera = null, 
renderer = null, 
scene = null, 
cube = null, 
animating = false; 

function onLoad() { 
// Grab our container div 
var container = document.getElementById("container"); 
// Create the Three.js renderer, add it to our div 
renderer = new THREE.WebGLRenderer({ 
    antialias: true 
}); 
renderer.setSize(container.offsetWidth, container.offsetHeight); 
container.appendChild(renderer.domElement); 
// Create a new Three.js scene 
scene = new THREE.Scene(); 
// Put in a camera 
camera = new THREE.PerspectiveCamera(45, 
    container.offsetWidth/container.offsetHeight, 1, 4000); 
camera.position.set(0, 0, 3); 
// Create a directional light to show off the object 
var light = new THREE.DirectionalLight(0xffffff, 1.5); 
light.position.set(0, 0, 1); 
scene.add(light); 
// Create a shaded, texture-mapped cube and add it to the scene 
// First, create the texture map 
var mapUrl = "cuttherope.jpg"; 
var map = THREE.ImageUtils.loadTexture(mapUrl); 
// Now, create a Phong material to show shading; pass in the map 
var material = new THREE.MeshPhongMaterial({ 
    map: map 
}); 
// Create the cube geometry 
var geometry = new THREE.CubeGeometry(1, 1, 1); 
// And put the geometry and material together into a mesh 
cube = new THREE.Mesh(geometry, material); 
// Turn it toward the scene, or we won't see the cube shape! 
cube.rotation.x = Math.PI/5; 
cube.rotation.y = Math.PI/5; 
// Add the cube to our scene 
scene.add(cube); 
renderer.render(scene, camera); 

}

을하지만이 run 기능을 추가하고 requestAnimationFrame를 호출 후에는 큐브

... 
cube.rotation.x = Math.PI/5; 
cube.rotation.y = Math.PI/5; 
// Add the cube to our scene 
scene.add(cube); 
run(); 
} 

function run() { 
renderer.render(scene, camera); 
requestAnimationFrame(run); 

을 보여줍니다}

누군가 제발 설명해 주시겠습니까? 감사합니다.

Answer 1

질감 (지도)이 비동기 적으로로드되므로 첫 번째 예에서는 render()을 호출 할 때 질감을 아직 사용할 수 없습니다. 이미지가로드 될 때 또는 requestAnimationFrame을 사용하여 작업 한 것처럼 다시 렌더링하려면 텍스처로드 콜백이 필요하며 연속 렌더링 루프가 있어야합니다.