three.js - three.js -- 适合背景图像全景

Question

我正在尝试将这张图片 - https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg - 作为我的全景背景三.js 场景。

我有以下代码：

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 度（但小于那个）。我该如何对齐？

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

是否有关于如何将给定的背景图像完美匹配为 three.js 全景图的指南？

Answer 1

据我所知，没有指南，但您可以使用 three.js 示例进行测试：

• 对于equirectangular（您可以拖动 equirectangular 图像来测试它们）
• 对于双鱼眼

这里也有立方体地图，但这不是创建全景图的常用或简单方法，而且这种情况下它适用于 CSS，而不是 webGL。

正如您在 webGL equirectangular 全景代码中看到的那样，正确的代码是：

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