three.js-适合背景图片全景 [英] three.js -- fit a background image panorama

问题描述

我正在尝试放置此图片-

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.

我有以下代码:

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

但是

1. 当我查看硬纸板并旋转360度时，看不到背景旋转360度(但小于360度).我如何对齐?

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?

当我在笔记本电脑上查看时，我可以旋转图像，但似乎不适合屏幕尺寸

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

是否有关于如何完美地将给定的背景图像调整为three.js全景图的指南?

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

推荐答案

据我所知，目前尚无准则，但是您可以使用three.js示例进行测试:

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

• 对于 equirectangular (您可以将等角矩形图像拖到上方进行测试)
• 对于 dualfisheye

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

这里也有立方图，但这不是创建全景图的通常或简便的方法，并且在这种情况下，它可以在CSS上工作，而不是在webGL上工作.

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.

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

这篇关于three.js-适合背景图片全景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！