Three.js 不渲染带有自定义纹理的立方体 [英] Three.js not rendering cube with custom texture

问题描述

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

虽然我在控制台中看到 THREE.WebGLRenderer 87，但似乎没有渲染任何立方体.

我创建了一个小提琴来展示我如何尝试这样做:

I'm trying to render a three.js box that has custom textures which I'm loading using THREE.TextureLoader().

While I see THREE.WebGLRenderer 87 in my console, there doesn't seem to be any cube being rendered.

I've created a fiddle to show how I'm attempting to do it: http://jsfiddle.net/hfj7gm6t/4786/

Note that I'm just using one url for all 6 side's textures for simplicity's sake.

Can anybody please help me understand why my beloved cube isn't showing?

解决方案

First you need a render loop, you cannot just call renderer.render once. Then you need to position your camera correctly and make sure it is actually looking at your cube:

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

这篇关于Three.js 不渲染带有自定义纹理的立方体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！