Question

I’m making my first animation with WebGL and three.js. Everything goes well except that my animation only appears when the mouse has entered the window.

My animation

My code :

var container = document.getElementById('container');
var wi       = window.innerWidth;
var he       = window.innerHeight;
var renderer  = new THREE.WebGLRenderer({
    antialias: true
});
var scene    = new THREE.Scene();
var camera   = new THREE.PerspectiveCamera(75,wi/he,1,10000);
var distance = 500;
var geometry2 = new THREE.Geometry();

renderer.setSize(wi ,he);
container.appendChild(renderer.domElement);
scene.add(camera);

var texture = THREE.ImageUtils.loadTexture( '/wp-content/themes/auriga-7/i/cloud.png' );
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;

var material = new THREE.MeshBasicMaterial( { map: texture,transparent: true} );
var plane = new THREE.PlaneGeometry( 400,400,4,8 );


for ( ix = 0; ix <100; ix++ ) {
item = new THREE.Mesh( plane, material );
item.position.x = ((Math.random()-0.5)*(Math.random() * wi/2) /4)*Math.random()*10;
item.position.y = ((Math.random()-0.5)*(Math.random() * he/2) /4)*Math.random()*10;
item.position.z = ix*10-50;
item.rotation.z = Math.random() *250;
item.scale.x = item.scale.y = Math.random() * Math.random() * 2 + 0.5;

THREE.GeometryUtils.merge(geometry2,item);
}

mesh = new THREE.Mesh( geometry2, material );
scene.add(mesh);


camera.position.z = distance;
camera.lookAt(scene.position);
renderer.sortObjects = false;


// create a point light
var pointLight =
  new THREE.PointLight(0xFFFFFF);

// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;

// add to the scene
scene.add(pointLight);
renderer.render(scene, camera);

document.addEventListener('mousemove',onMouseMove, false);
window.addEventListener('resize',onResizeMyFuckinBrowser,false);
function onMouseMove(event){

var mouseX = event.clientX - wi/2;
var mouseY = event.clientY - he/2;

camera.position.x = (mouseX - camera.position.x) * 0.02;
camera.position.y = (-mouseY - camera.position.y) * 0.02;
camera.position.z = distance;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
function onResizeMyFuckinBrowser(){
var wi       = window.innerWidth;
var he       = window.innerHeight;
renderer.setSize(wi ,he);
renderer.render(scene, camera);
}

How can I resolve this problem?

Answer 1

The texture loading is an asynchronous event. Most likely, your render() call in the main program occurs before the texture has loaded. Your other render() calls only occur on mouse move events and resize events. This is why you see nothing until the mouse is moved.

If you don’t want to use requestAnimationFrame(), you can look at the arguments of ImageUtils.loadTexture(), where you will see an option for a callback function. You could place a render call inside the callback.