CODEWITHSUNDEEP
javascriptthree.jsrendering
Thịnh Phạm
Thịnh Phạm

Reputation: 2663

three.js does not render, must have requestAnimationFrame?

I'm doing the example in Chapter 2 - WebGL Up and Running book.

I want to show up a static texture-mapped cube.

This code doesn't work:

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

}

But after I add a run function and call requestAnimationFrame, it shows up the cube 

...
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);

}

Can someone please explain me why? Thanks!

Upvotes: 2

Views: 5752

Answers (1)

yaku
yaku

Reputation: 3111

The texture (map) loads asynchronously, so in the first example, when you call render(), the texture is not yet available. You need to have a texture loading callback to re-render when the image is loaded, or as you have done with the requestAnimationFrame, have a continuous rendering loop.

Upvotes: 4

Related Questions