加载多个图像

Question

如何将一组图像加载到webGL渲染器的不同位置？ 我有4幅图像（单个图像的一部分） 每个图像是固定大小256×256，并且具有可用的位置信息 image1的是在位置0,0 图像2 - POS（0256） 图像3 - POS（256,0） 图像4 - POS（256，256）

如何正确地加载它们在threejs

Answer 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 

Answer 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张图片会被加载作为一个单一的纹理，你可以在飞机上使用（或任何类型的几何体）。除了带有画布的图像之外，您还有更多选择，您可以简单地在画布上填充颜色，在图像之间留出空白空间等。