-1

This is my code - 

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

I am running this on localhost apache server, but nothing visible in the browser. A black screen.

However, when I do this - 

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

Everything works fine then ! I tried adding a callback on ImageUtils.Load but still nothing is rendered on screen until I put in an animation loop. I have been scratching my head since days now. Please explain n help. I dont want to put the animation frame just to display the image texture.

Arthas
  • 89
  • 9
  • possible duplicate of [Using textures in THREE.js](http://stackoverflow.com/questions/7919516/using-textures-in-three-js) – Mouloud85 Sep 09 '15 at 10:55

1 Answers1

0

Loading a texture is done via an asynchronous XMLHTTPRequest. When the image is loaded after few hundred of milliseconds, the main script has executed the render call long time ago.

You have to move renderer.render(scene,camera) to the loader onLoad callback which is its third parameter : 

THREE.ImageUtils.loadTexture( URL, mapping, function(){
      renderer.render(scene,camera);
});

see the doc

Mouloud85
  • 3,826
  • 5
  • 22
  • 42