CODEWITHSUNDEEP
three.js
rkm
rkm

Reputation: 952

load multiple images

How to load a set of images each with a different position to a webGL renderer? I had 4 images (part of a single image) each image is of fixed size 256x256 and have position info available image1 is at position 0,0 image 2 - pos(0,256) image3 - pos(256,0) image4 - pos(256, 256)

how to load them properly in threejs

Upvotes: 1

Views: 1348

Answers (2)

frank
frank

Reputation: 477

You can use a canvas as texture source. For example, if you want to arrange your tiles in a 512x512 texture, you can do something like:

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);

The parameters of drawImage in this case are: imageSource, x-position, y-position, width, height.

you can read about the drawImage function here: http://www.w3schools.com/tags/canvas_drawimage.asp

This way your 4 images would be loaded as a single texture which you can be used on a plane (or any type of geometry). You have more options besides the images with a canvas, you can simply fill the canvas with colors, leave empty space between images, etc.

Upvotes: 2

maQ
maQ

Reputation: 506

It will be some background?

If images are so small i thing it will be better to join them and load as a single picture.

Generally you can put THREE.Plane with texture as your image. Something like this:

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

Upvotes: 0

Related Questions