Three.js MeshPhongMaterialテクスチャ

Question

私は3つのjsテクスチャをMeshPhongMaterialに追加しようとしていますが、なんらかの理由で点灯したブラックボックスが表示されています。私はしばらくこのことに固執しており、それを理解しているようには見えません。

//Creates the cube and lighting effect 
    function initCube() { 
    var loader = new THREE.TextureLoader(); 
    var texture1 = loader.load("brick.jpg"); 
    cubeTexture = loader.load 

    cube = new THREE.Mesh(new THREE.BoxGeometry(3,3,3), new 
    THREE.MeshPhongMaterial({color:0xffffff, map:texture1})); 
    scene.add(cube); 

    cube.scale.set(0.5, 0.5, 0.5); 
    cube.position.x = 0; 

    //Adds light 
    cubeLight = new THREE.PointLight(0xFF0000 , 30, 1); 
    cube.add(cubeLight); 
    cubeLight.position.set(-0.5,-1,0); 
    scene.add(cubeLight); 
    cubeLight.power =100; 


    map.cubeLight = { 
     light: cubeLight, 
     added: true 
    } 

    //Adds second light 
    cubeLight2 = new THREE.PointLight(0x6600ff , 1, 1); 
    cube.add(cubeLight2); 
    cubeLight2.position.set(0,1,0); 
    scene.add(cubeLight2); 
    cubeLight2.power =100; 

    map.cubeLight2 = { 
     light: cubeLight2, 
     added: true 
    } 

    } 

Answer 1

ライトがボックス内にあるように思えます。ボックスの外にライトを配置するために大きな値を選択します。また、それらを外に置いた場合は、ポイントライトの値をdistanceに増やす必要があります。さもなければ、ライトは1ユニットの距離を超えて何も点灯しません。

シーンにアンビエントライトを追加して、テクスチャがロードされているかどうかを確かめてください。

最後に、シーンにライトを2回追加しました。 1回はscene.add(cubeLight)で、もう1回はcube.add(cubeLight)で、cubeはすでにシーンに追加されています。