Hi I trying to load a image to a cube but i don't know what is wrong. The cube is fine but not the image. Here is the link: /

var scene, camera, renderer;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColorHex(0xeeeeee);
renderer.clear();
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 0.1, 5000 );
camera.position.z = 800;
camera.lookAt(scene.position);
scene.add(camera);
var material = new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture("img.jpg")
});
material.map.needsUpdate = true; 
var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300), material);
cube.overdraw = true;
cube.position.x = 0;
cube.rotation.x = -20;
cube.rotation.z = -2;
scene.add(cube);
renderer.render(scene, camera);

Hi I trying to load a image to a cube but i don't know what is wrong. The cube is fine but not the image. Here is the link: http://diegoddox.bitbucket/loadimage/

var scene, camera, renderer;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColorHex(0xeeeeee);
renderer.clear();
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, window.innerWidth/window.innerHeight, 0.1, 5000 );
camera.position.z = 800;
camera.lookAt(scene.position);
scene.add(camera);
var material = new THREE.MeshBasicMaterial({
    map: THREE.ImageUtils.loadTexture("img.jpg")
});
material.map.needsUpdate = true; 
var cube = new THREE.Mesh(new THREE.CubeGeometry(300, 300, 300), material);
cube.overdraw = true;
cube.position.x = 0;
cube.rotation.x = -20;
cube.rotation.z = -2;
scene.add(cube);
renderer.render(scene, camera);

• javascript
• three.js
• webgl

• Are you running locally from file system? Or using a web server? Can you check if "img.jpg" is loaded in dev tools or firebug etc.? – Neil Commented Feb 19, 2013 at 14:00
• Yes I'm running locally. And when i dibug i get this error. WebGL: INVALID_VALUE: texImage2D: invalid image localhost:1 WebGL: INVALID_OPERATION: generateMipmap: level 0 not power of 2 or not all the same size localhost:1 WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have inpatible texture filtering or is not 'texture plete' – diegoddox Commented Feb 19, 2013 at 14:02
• Have a look at this - github./mrdoob/three.js/wiki/How-to-run-things-locally – Neil Commented Feb 19, 2013 at 14:04
• Id suggest downloading xampp or similar very easy to run local server – Neil Commented Feb 19, 2013 at 14:05
• I will try on the server. Thanks @Neil – diegoddox Commented Feb 19, 2013 at 14:14

1 Answer 1

The image loading is asynchronous.

What is happening is that your single render() call is occurring before the image finishes loading.

Enter

renderer.render(scene, camera);

into the Console, and you will see that the texture renders.

You need to add a callback to your loadTexture() function and call render() from there, or, alternatively, you can add an animation loop using requestAnimationFrame().