それぞれ異なる位置にある画像のセットをwebGLレンダラーにロードするにはどうすればよいですか?4つの画像(単一の画像の一部)がありました。各画像は固定サイズの256x256で、位置情報を利用できます。image1は位置0,0にあります。画像2-pos(0,256)image3-pos(256,0)image4-pos(256 、256)
threejsでそれらを正しくロードする方法
それぞれ異なる位置にある画像のセットをwebGLレンダラーにロードするにはどうすればよいですか?4つの画像(単一の画像の一部)がありました。各画像は固定サイズの256x256で、位置情報を利用できます。image1は位置0,0にあります。画像2-pos(0,256)image3-pos(256,0)image4-pos(256 、256)
threejsでそれらを正しくロードする方法
キャンバスをテクスチャ ソースとして使用できます。たとえば、タイルを 512x512 のテクスチャに配置したい場合は、次のようにすることができます。
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// load tiles into a canvas
context.drawImage(image0, 0, 0, 256, 256);
context.drawImage(image1, 256, 0, 256, 256);
context.drawImage(image2, 0, 256, 256, 256);
context.drawImage(image3, 256, 256, 256, 256);
// tiles merged into a single image attached to texture
var texture = new THREE.Texture(canvas);
この場合の drawImage のパラメータは、imageSource、x 位置、y 位置、幅、高さです。
drawImage 関数については、 http ://www.w3schools.com/tags/canvas_drawimage.asp で読むことができます。
このようにして、4 つの画像が単一のテクスチャとしてロードされ、平面 (または任意のタイプのジオメトリ) で使用できます。キャンバスの画像以外にもオプションがあり、キャンバスを色で塗りつぶしたり、画像の間に空白を残したりすることができます。
背景になるのでしょうか?
画像が非常に小さい場合は、それらを結合して 1 つの画像として読み込む方がよいと思います。
一般的に、テクスチャをイメージとして THREE.Plane を配置できます。このようなもの:
var texture = THREE.ImageUtils.loadTexture( "image.png" );
texture.minFilter = texture.magFilter = THREE.LinearFilter; //If you wish to have some filtering when moveing camera
var plane = new THREE.Mesh( new THREE.PlaneGeometry( 256, 256 ),
new THREE.MeshLambertMaterial( { map: texture} ) );
plane.position.set( 0, 0, 0 ); //Different for each image