Three.js MeshPhongMaterial Texture

Question

I'm trying to add a three js texture to a MeshPhongMaterial, but for some reason, I'm just getting a lit black box. I've been stuck on this for a while and can't seem to figure it out.

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

    }

Are you running a web server or are you trying to open the .html file directly in your browser? The latter being the most common reason for this not working, you should see warnings/errors in the browser console. See http://stackoverflow.com/questions/21151026/three-js-cant-load-texture-locally . — Paul-Jan, May 08 '17 at 09:10

score 0 · Answer 1 · answered May 08 '17 at 13:46

It seems like the lights are inside the box. Choose greater values to position the lights outside of the box. And when placed them outside, you should also increase the distance value of your point lights. Otherwise, the lights won't light anything beyond a distance of 1 unit.

You could also add an ambient light to the scene, then you should definitely see, if the texture has loaded.

And a last thing: you added the the light twice to the scene. Once with scene.add(cubeLight) and once with cube.add(cubeLight), while cube has already been added to the scene.

Three.js MeshPhongMaterial Texture

1 Answers1