Three.js MeshPhongMaterial Texture

我想向MeshPhongMaterial添加三個js紋理，但由於某種原因，我只是得到一個亮黑色的盒子。我一直堅持這一段時間，似乎無法弄清楚。Three.js MeshPhongMaterial Texture

//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 
    } 

    }

來源

2017-05-07 user2975937

您是否正在運行Web服務器，或者您是否試圖直接在瀏覽器中打開.html文件？後者是導致此問題的最常見原因，您應該在瀏覽器控制檯中看到警告/錯誤。見http://stackoverflow.com/questions/21151026/three-js-cant-load-texture-locally。 –

看起來好像燈在箱子裏面。選擇更大的值來將燈放在盒子外面。當把它們放在室外時，你也應該增加點燈的數值。否則，燈光將不會點亮超過1個單位的距離。

你也可以添加一個環境光線到場景，那麼你應該一定會看到，如果紋理已經加載。

而最後一件事：你把燈光兩次加到現場。一旦與scene.add(cubeLight)和一次cube.add(cubeLight)，而cube已被添加到現場。

來源

2017-05-08 13:46:39 Brakebein

Three.js MeshPhongMaterial Texture

回答

相關問題