three.js - 適合背景圖像全景

Question

我想把這個圖像 - https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg - 作爲我的three.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. ，當我在我的筆記本電腦的看法，我可以旋轉圖像，但它似乎underfit屏幕尺寸

是否有關於如何完美地貼合在給定的背景圖像作爲three.js所的指導方針全景？

Answer 1

據我所知，沒有任何指引，但你可以用three.js所實施例的測試：

• 對於equirectangular（你可以拖動在你的等距離長方圓柱圖像，以測試它們）
• 對於dualfisheye

還有cubic map here，但它不是創建全景的通常或簡單的方法，而這種情況下，它的工作原理在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);