three.jsでテクスチャ画像をロードする #JavaScript

three.jsでテクスチャ画像をロードするサンプルコードです。

REVISION:76時点では、THREE.ImageUtils.loadTexture(url)よりTextureLoaderを使うことが推奨されているので、こちらを使ったサンプルです。

const texLoader = new THREE.TextureLoader();
texLoader.crossOrigin = '*';
texLoader.load('http://server/path/to/image.jpg', 
  texture => { // onLoad
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new MeshBasicMaterial({ map: texture });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    ...
  },
  xhr => { // onProgress
    ...
  },
  xhr => { // onError
    ...
  }
);

SecurityError: DOM Exception 18のようなクロスドメイン系のエラーが出る場合は、texLoader.crossOrigin = '*';を忘れずに付けることで解消できます。