three.js ImageUtils.loadTexture don't show Image

[CrazyPlaya]

Hi @ all,

 

I'm trying a tutorial on using three.js. Now I have the problem, that image that I'm using in MeshPhongMaterial doesn't shown on screen.

 

Here some code.

var geometry = new THREE.SphereGeometry(0.5, 32, 32);var texture = new THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');var material = new THREE.MeshPhongMaterial({map: THREE.ImageUtils.loadTexture('images/earthmap1k.jpg')});material.bumpMap = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');material.bumpScale = 0.05;var earthMesh = new THREE.Mesh(geometry, material);var renderer = new THREE.WebGLRenderer();var $container = $('#container');var scene = new THREE.Scene();scene.add(earthMesh);var light = new THREE.AmbientLight(0x888888);scene.add(light);var light = new THREE.DirectionalLight( 0xCCCCCC, 1 )light.position.set(5,3,5)scene.add( light ) renderer.setSize(window.innerWidth, window.innerHeight);$container.append(renderer.domElement);var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000 );camera.position.z = 1.renderer.render(scene, camera);

All I see is black.

 

I'm working on Linux with Firefox 20. The Directory has 0777 rights recursive to subfolders an files.

 

What is the problem here? 

 

Best regards

 

Karsten

[kuuuurija]

any errors in console?

[CrazyPlaya]

Hi goldenratio,

 

no errors in console. 

I´ve tried this on weekend on my windows 7 machine but the same problems, tried it with chrome and ff.

Don´t understand why. 

By debugging no abnormalities!

 

Trying another Tutorial with using texture creates the error:

1. Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': the cross-origin image at file:///C:/webgltests/webglearth/images/crate.jpg may not be loaded. three.js:25684
   1. setTexturethree.js:25684
   2. loadUniformsGenericthree.js:24607
   3. setProgramthree.js:24136
   4. renderBufferthree.js:22515
   5. renderObjectsthree.js:23205
   6. renderthree.js:23079
   7. animateindex.html:27
   8. (anonymous function)

[jeromechoain]

Hi,

 

maybe you can try to set needsUpdate to true for all your image textures.

 

Something like this might help:

 

texture.needsUpdate = true;