three.js — fit a background image panorama

时光毁灭记忆、已成空白 提交于 2019-12-23 03:38:10

问题


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

  1. When i view through cardboard, and rotate 360 degrees, i do not see the background rotate 360 degrees (but less than that). How do i align?

  2. When i view on my laptop, i can rotate the image but it seems to underfit the screen dimensions

Is there a guideline on how to perfectly fit a given background image as a three.js panorama?


回答1:


As far as I know, there is no guideline, but you can test with the three.js examples:

  • For equirectangular (you can drag over your equirectangular images to test them)
  • For dualfisheye

There's also cubic map here, but it's not a usual or easy way of creating panoramas, and this case it works over CSS, not webGL.

As you can see in the webGL equirectangular panorama code, the correct code would be:

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


来源:https://stackoverflow.com/questions/36780354/three-js-fit-a-background-image-panorama

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!