three.jsのバージョン
THREE.WebGLRenderer 73
背景
今はまだ使えるが、よく検索すると出て来る
THREE.ImageUtils.loadTexture
は、deprecatedらしく、警告がコンソールに出力される。
そこで、今風のやり方を探った。
THREE.CubeTextureLoaderの使い方
ググってもTHREE.CubeTextureLoaderの使い方が見つからず、試行錯誤して、
以下の書き方に落ち着いた。
const cubeTexLoader = new THREE.CubeTextureLoader();
const urls = [ "/assets/C/L/c/A/CLcAB.png",
"/assets/6/k/e/e/6keeX.png",
"/assets/6/k/e/e/6keeX.png",
"/assets/6/k/e/e/6keeX.png",
"/assets/C/L/c/A/CLcAB.png",
"/assets/6/k/e/e/6keeX.png" ];
cubeTexLoader.load( urls, function(tex) {
const cubeShader = THREE.ShaderLib[ 'cube' ];
cubeShader.uniforms[ 'tCube' ].value = tex;
const skyBoxMaterial = new THREE.ShaderMaterial({
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.BackSide
});
const mesh = new THREE.Mesh( new THREE.BoxGeometry( 3000, 3000, 3000, 1, 1, 1 ),
skyBoxMaterial);
scene.add( mesh );
CubeTextureLoader#loadのコールバックで渡されるオブジェクトが
単純に画像データの配列でないことはわかったが、じゃぁどう扱うかが
分からず試行錯誤した。
まとめ
skyboxに使うには無理のあるテクスチャだったw。