three.js texture is not loading - three.js

Question

by trying a tutorial ( http://learningthreejs.com/blog/2013/09/16/how-to-make-the-earth-in-webgl/ ) the needed texture is not loading.
Here is my trying code in the index.html script area
<script src="js/jquery.js"></script>
<script src="js/threejs/build/three.js"></script>
<script>
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000 );
camera.position.z = 1.5;
var texture = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');
texture.anisotropy = 16;
var material = new THREE.MeshPhongMaterial( { map: texture } );
/*material.bumpMap = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');
material.bumpScale = 0.05;*/
var scene = new THREE.Scene();
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);
var earthMesh = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), material);
scene.add(earthMesh);
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize(window.innerWidth, window.innerHeight);
var $container = $('#container');
$container.append(renderer.domElement);
renderer.render(scene, camera);
</script>
so what I'm doing wrong here???
thanks for your help in advance
best regards
Karsten

Answer 1

try this..
var tUrl = "images/earthbump1k.jpg";
var texture = THREE.ImageUtils.loadTexture(tUrl, {}, createMesh);
function createMesh(texture){
var material = new THREE.MeshPhongMaterial( { map: texture } );
var earthMesh = new THREE.Mesh(new THREE.SphereGeometry(0.5, 32, 32), material);
scene.add(earthMesh);
}