1

それぞれ異なる位置にある画像のセットをwebGLレンダラーにロードするにはどうすればよいですか?4つの画像(単一の画像の一部)がありました。各画像は固定サイズの256x256で、位置情報を利用できます。image1は位置0,0にあります。画像2-pos(0,256)image3-pos(256,0)image4-pos(256 、256)

threejsでそれらを正しくロードする方法

4

2 に答える 2

2

キャンバスをテクスチャ ソースとして使用できます。たとえば、タイルを 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 つの画像が単一のテクスチャとしてロードされ、平面 (または任意のタイプのジオメトリ) で使用できます。キャンバスの画像以外にもオプションがあり、キャンバスを色で塗りつぶしたり、画像の間に空白を残したりすることができます。

于 2013-01-30T12:02:14.373 に答える
0

背景になるのでしょうか?

画像が非常に小さい場合は、それらを結合して 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
于 2013-01-17T00:00:46.810 に答える