Three.js MeshPhongMaterial 텍스처

Question

MeshPhongMaterial에 3 개의 js 텍스처를 추가하려고하는데, 어떤 이유로 든 불이 켜진 블랙 박스를 얻고 있습니다. 나는 이것에 잠시 붙어 있었고 그것을 이해하는 것처럼 보일 수 없다.

//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 단위 거리를 초과하여 켜지지 않습니다.

또한 장면에 주변 조명을 추가 할 수 있습니다. 그러면 텍스처가로드되었는지 확실히 확인해야합니다.

그리고 마지막으로 장면에 빛을 두 번 추가했습니다. 한 번은 scene.add(cubeLight)으로, 한 번은 cube.add(cubeLight)으로, cube은 이미 장면에 추가되었습니다.