【Three.js】マテリアルのテスクチャーに画像や動画を設定する方法(デモ付き)

async function initializeThreeJS() {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  document.body.appendChild(renderer.domElement);
 
  const geometry = new THREE.PlaneGeometry(20, 10);

  // texture: 質感を意味するが、3Dでは画像や動画も含まれる
  // textureのloaderを読み込み
  const texLoader = new THREE.TextureLoader();
  // texLoaderが非同期処理なのでawait
  // textureを設定
  const texture = await texLoader.loadAsync(
    // "https://picsum.photos/800/400?random=1"
    "/img/img.jpg"
  );
  // mapを使ってtextureを設定
  const material = new THREE.MeshBasicMaterial({ map: texture });

  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 30;

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x = cube.rotation.x + 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
  }

  animate();
}
initializeThreeJS();

  // textureのloaderを読み込み
  const texLoader = new THREE.TextureLoader();

  // textureを設定
  const texture = await texLoader.loadAsync(
    // "https://picsum.photos/800/400?random=1"
    "/img/img.jpg"
  );

async function initializeThreeJS() {
...
}

  // mapを使ってtextureを設定
  const material = new THREE.MeshBasicMaterial({ map: texture });

  const material = new THREE.MeshBasicMaterial({ map: texture });

  const newTexture = await texLoader.loadAsync("/img/newImg.jpg");
  setTimeout(() => {
    material.map = newTexture;
  }, 3000);
  const cube = new THREE.Mesh(geometry, material);