Three.js MeshPhongMaterial纹理

Question

我正在尝试将three.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
    }

    }

- user2975937

---

你是在运行一个Web服务器还是试图直接在浏览器中打开.html文件？后者是这种情况无法工作的最常见原因，你应该在浏览器控制台中看到警告/错误。请参阅https://dev59.com/uXvaa4cB1Zd3GeqPCFue。 - Paul-Jan

Answer 1

看起来灯光在盒子里面。选择更大的值将灯光定位到盒子外部。当将它们放在外面时，您还应该增加点光源的distance值。否则，灯光将不会照亮距离超过1个单位的任何东西。

您还可以向场景中添加环境光，这样您就一定能看到纹理是否已加载。

最后一件事：您将灯光两次添加到了场景中。一次是使用scene.add(cubeLight)，另一次是使用cube.add(cubeLight)，而cube已经被添加到场景中了。

- Brakebein