Reputation: 269
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)
Upvotes: 2
Views: 2079
Reputation: 1353
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.
Upvotes: 2