Geek asks and answers

Three.js - suitable for panorama of the background image

I am trying to put this image - https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg - as a panorama background in my three.js scene .

I have the following code:

var sphere = new THREE.SphereGeometry(200, 200, 32);
sphere.applyMatrix(new THREE.Matrix4().makeScale(-1, 1, 1));

var sphereMaterial = new THREE.MeshBasicMaterial();
sphereMaterial.map = THREE.ImageUtils.loadTexture(<path to above image>);

var sphereMesh = new THREE.Mesh(sphere, sphereMaterial);
scene.add(sphereMesh);

However

  • When I look at the cardboard and rotate 360 ​​degrees, I don’t see the background rotate 360 ​​degrees (but less than that). How to align?

  • When I look on my laptop, I can rotate the image, but it does not seem to fit the screen size

Is there any guide on how to perfectly match this three.js panorama background image?

+1
source share
1 answer

, , three.js:

, , CSS, webGL.

webGL, :

var geometry = new THREE.SphereGeometry( 500, 60, 40 );
geometry.scale( - 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( {
  map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
0

More articles:


All Articles