JaveScriptのthree.jsのTextureLoaderとMeshPhongMaterialについて

JaveScriptのthree.jsにてボックスに画像を貼り付けようとしているのですが、画像が貼りつかずにボックスのみが描画されてしまいます。

<script src="three.min.js"></script>

中略

var renderer = new THREE.WebGLRenderer();
renderer.setSize( waku.clientWidth, waku.clientHeight );
waku.appendChild( renderer.domElement );

var scene = new THREE.Scene();

////////カメラ
var camera = new THREE.PerspectiveCamera( 60, waku.clientWidth / waku.clientHeight, 0.1, 1000 );
camera.position.set( 0, 0, 50 );

////////光源
var directionalLight = new THREE.DirectionalLight( 0xffffff,10 );
directionalLight.position.set( 0, 0.7, 0.7 );
scene.add( directionalLight );

////////箱
var texture = new THREE.TextureLoader().load('./BRS_PUCHI_01.jpg');
var material = new THREE.MeshPhongMaterial({ color: 0xffffff, map: texture });
var geometry = new THREE.CubeGeometry( 30, 30, 30 );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

renderer.render( scene, camera );