Question

如何将一组具有不同位置的图像加载到webGL渲染器？我有4张图片（单张图片的一部分）每张图片的大小固定为256x256，并提供位置信息 image1位于0,0位置图片2 - pos（0,256） image3 - pos（256,0） image4 - pos（256,256）

如何在threejs中正确加载它们

Answer 1

您可以使用画布作为纹理源。例如，如果要将图块排列为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-position，y-position，width，height。

你可以在这里阅读drawImage函数：http://www.w3schools.com/tags/canvas_drawimage.asp

这样，您的4幅图像将作为单个纹理加载，您可以在平面（或任何类型的几何体）上使用。除了带有画布的图像之外，您还有更多选项，您可以使用颜色填充画布，在图像之间留下空白空间等。

Answer 2

这将是一些背景？

如果图像太小，我最好加入它们并加载为单张图片。

一般情况下，您可以将带有纹理的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

加载多个图像

2 个答案: