

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

[![画像の説明をここに入力](https://i.stack.imgur.com/sV11U.png)](https://i.stack.imgur.com/sV11U.png)

[code]

    <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 );
    
[/code]


CC BY-SA 3.0
2017-02-26T04:59:58.807
32950
2017-02-26T06:32:52.340
20829
question
javascript php html
JaveScriptのthree.jsのTextureLoaderとMeshPhongMaterialについて


自己解決しました。

問題-  
new THREE.TextureLoader().loadが非同期

修正-

[code]

    ////////箱
        var loader = new THREE.TextureLoader();
    // load a resource
        loader.load(
            'BRS_PUCHI_01.jpg',
    
            function ( texture ) {
                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 );
            }
        );
    
[/code]


CC BY-SA 3.0
2017-02-26T06:32:52.340
32954
2017-02-26T06:32:52.340
20829
32950
answer