three.js - 加载多个图像

Question

如何将一组具有不同位置的图像加载到 webGL 渲染器？我有 4 个图像（单个图像的一部分）每个图像的大小固定为 256x256，并且有可用的位置信息 image1 位于位置 0,0 image 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