three.js: Add an image on the floor of a panorama

Question

I am using this code Panorama and I want to add an image on the floor of this pano. Can somebody guide me on how to do that. The image is very small (256x256)

Answer 1

In order to add an image on the floor you should create a PlaneGeometry, a MeshBasicMaterial and then apply them to a Mesh and then change position and rotationOnAxis.

Example:

var geometry = new THREE.PlaneGeometry( 1, 1 );
var material = new THREE.MeshBasicMaterial( { map : texture, opacity : 1, side : THREE.DoubleSide, transparent : true } );
var sprite = new THREE.Mesh( geometry, material );

where texture is the image you want to insert, added via texture loader.

Then you must set the position of the sprite via the position.set function .

For setting the sprite to the north:

sprite.position.set(0,-360,0);

For setting the sprite to the south:

sprite.position.set(0,360,0);

The last step is to rotate the sprite 90 degrees so to be visible because otherwise it will be rendered like this | and not [] . So we must do a rotateOnAxis:

sprite.rotateOnAxis(  new THREE.Vector3( 1, 0, 0 ), THREE.Math.degToRad(90) );

If the image is too small you can use:

sprite.scale.set( scaleValue, scaleValue, scaleValue );

Where scaleValue is a value greater than 0.