THREE.TextureにHTMLImageElementを適用する方法

概要

本記事では、Three.js内部のテクスチャとしてTextureLoaderを使って画像や動画をテクスチャとして扱うことはよくあると思いますが、公式ドキュメントの例として言及されていないHTMLImageElementをテクスチャとして適用する方法を扱います。

サンプルコード

非同期で画像からHTMLImageElementとTHREE.Textureの生成をまとめて行えるようにしてみました。

const [imageElement, imageTexture ] = await new Promise<[HTMLImageElement, THREE.Texture]>(
      (resolve) => {
        const img = new Image()
        img.crossOrigin = 'anonymous' // cors対応、これをしないとTHREE.Textureが黒くなる
        img.src = 'xxx'
        img.onload = () => {
          resolve([img, new THREE.Texture(img)])
        }
      }
    )

※three.js. r149

終わりに

今回は画像についてのみ言及しましたが、動画に関しても同様にHTMLVideoELementをテクスチャとしてTextureLoaderを使わずに適用することもできるかと思います。