Here is the code snippet I am using:
var scene = new THREE.Scene();
// adding a camera
var camera = new THREE.PerspectiveCamera(fov,window.innerWidth/window.innerHeight, 1, 2000);
//camera.target = new THREE.Vector3(0, 0, 0);
// setting up the renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(renderW, renderH);
document.body.appendChild(renderer.domElement);
// creating the panorama
// panoramas image
var panoramasArray = ["01.jpg"];
// creation of a big sphere geometry
// default segments of sphere w 8 h 6
var sphere = new THREE.SphereGeometry(400,100,40);
sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));
// creation of the sphere material
var sphereMaterial = new THREE.MeshBasicMaterial({color:0x0000FF});
sphereMaterial.map =THREE.ImageUtils.loadTexture(panoramasArray[1])
// geometry + material = mesh (actual object)
sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);
camera.position.z = 900;
renderer.render(scene, camera);
When running this on localhost apache server, nothing appears in the browser except for a black screen.
Surprisingly, everything starts to work perfectly when I add the following function:
function render()
{
requestAnimationFrame(render);
renderer.render(scene, camera);
}
I have tried adding a callback on ImageUtils.Load but it doesn't render anything on screen until I implement an animation loop. This has been puzzling me for days now. Can you please explain and help? I don't want to rely on the animation frame solely to display the image texture.