Three.jsがカスタムテクスチャでキューブをレンダリングしない

Question

THREE.TextureLoader()を使用してロードしているカスタムテクスチャを持つthree.jsボックスをレンダリングしようとしています。

私のコンソールにはTHREE.WebGLRenderer 87が表示されていますが、レンダリングされているキューブはありません。私は簡単のため、すべての6側のテクスチャの1つの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()