Three.js가 사용자 정의 텍스처로 큐브를 렌더링하지 않습니다.

Question

THREE.TextureLoader()을 사용하여로드하는 사용자 정의 텍스처가있는 three.js 상자를 렌더링하려고합니다.

내 콘솔에 THREE.WebGLRenderer 87이 표시되는 동안 렌더링되는 큐브가없는 것 같습니다. 난 그냥 단순 위하여 모든 6 팀의 텍스처에 대한 하나 개의 URL을 사용하고 http://jsfiddle.net/hfj7gm6t/4786/

참고 :

나는 그것을 시도하고있어 방법을 보여 바이올린을 만들었습니다.

아무도 내 사랑하는 큐브가 보이지 않는 이유를 이해할 수 있습니까?

Answer 1

먼저 렌더 루프가 필요합니다. renderer.render을 한 번 호출 할 수는 없습니다.

let textureUrls = [ 
    'https://i.imgur.com/wLNDvZV.png', 'https://i.imgur.com/wLNDvZV.png', 'https://i.imgur.com/wLNDvZV.png', 
    'https://i.imgur.com/wLNDvZV.png', 'https://i.imgur.com/wLNDvZV.png', 'https://i.imgur.com/wLNDvZV.png' 
]; 

let renderer = null 
let camera = null 
let scene = null 

function renderMap(urls) { 

    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(
    60, window.innerWidth/window.innerHeight, 1, 100000); 

    camera.position.x = 500; 
    camera.position.y = 500; 
    camera.position.z = -500; 

    camera.lookAt(new THREE.Vector3(0, 0, 0)) 

    let textureLoader = new THREE.TextureLoader(); 

    let materials = 
    urls.map((url) => { 
     return textureLoader.load(url); 
    }).map((texture) => { 
     return new THREE.MeshBasicMaterial({map: texture}) 
    }); 

    let mesh = new THREE.Mesh(new THREE.BoxGeometry(200, 200, 200), materials); 
    scene.add(mesh); 
} 

function init() { 

    renderMap(textureUrls); 
    renderer = new THREE.WebGLRenderer(); 

    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 
    render(); 
} 

function render() { 

    requestAnimationFrame(render) 
    renderer.render(scene, camera) 
} 

init() 

: 그럼 당신은 제대로 카메라를 놓고 실제로 큐브에서 찾고 있는지 확인해야