three,jsで画像を貼り付ける(テクスチャ)ことがうまくいきません・・

Three.jsを使って立体を作ろうと思ってます。

練習として、地球を描写しようとしているのですが、画像がうまく貼り付けられません。

どうして貼り付けられないのかもわからないので困っています、どなたかわかる方がいらっしゃいましたらよろしくおねがいしますm(__)m

画像は同じフォルダ(ディレクトリ)においてます。
コードは下記のようになります

lang
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>try to make sphere</title>
6</head>
7<body>
8  <script src="three.min.js"></script>
9  <script>
10    var main = function (){
11      // write codes here
12      // make scene
13      var scene = new THREE.Scene();
14
15      var width = 600;
16      var height = 400;
17      
18      var fov = 60;
19      var aspect= width / height;
20      var near = 1;
21      var far = 1000;
22
23      var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
24      camera.position.set(0,0,500);
25
26      var renderer = new THREE.WebGLRenderer();
27      renderer.setSize(width, height);
28      document.body.appendChild(renderer.domElement);
29
30      //光源
31      var directionalLight = new THREE.DirectionalLight(0xffffff);
32      directionalLight.position.set(0, 0.7, 0.7);
33      scene.add(directionalLight);
34
35      //ここから作りたい画像の描写
36      var geometry = new THREE.SphereGeometry(300, 20, 20);
37      var earth_picture = new THREE.ImageUtils.loadTexture("earth.jpg");
38      //Lambert材質
39      var material = new THREE.MeshPhongMaterial({map:earth_picture});
40      var sphere = new THREE.Mesh(geometry, material);
41      scene.add(sphere);
42
43      renderer.render(scene, camera);
44
45    };
46
47    window.addEventListener('DOMContentLoaded', main, false);
48   </script>
49</body>
50</html>