Three.js不使用自定义纹理渲染立方体

Question

我正在尝试渲染一个具有自定义纹理的three.js框，我正在使用THREE.TextureLoader()加载。

虽然我在控制台中看到THREE.WebGLRenderer 87，但似乎没有任何多维数据集被渲染。

我创造了一个小提琴来展示我是如何尝试的：http://jsfiddle.net/hfj7gm6t/4786/

请注意，为了简单起见，我只是为所有6面的纹理使用一个网址。

有人可以帮我理解为什么我心爱的立方体没有出现吗？

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()