加載多個圖像

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張圖片會被加載作爲一個單一的紋理，你可以在飛機上使用（或任何類型的幾何體）。除了帶有畫布的圖像之外，您還有更多選擇，您可以簡單地在畫布上填充顏色，在圖像之間留出空白空間等。