Three.js not rendering cube with custom texture

Question

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?

Felipe Felipe · Accepted Answer · 2017-09-17T13:12:30

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 not rendering cube with custom texture

1 Answers