three.js - passen ein Hintergrundbild Panorama

Question

Ich versuche dieses Bild zu setzen - https://hdfreefoto.files.wordpress.com/2014/09/bright-milky-way-over-the-lake-at-night.jpg - als Panorama-Hintergrund in meiner three.js Szene.

Ich habe den folgenden 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); 

jedoch

1. Wenn ich durch Karton zu sehen, und um 360 Grad drehen, ich sehe nicht, den Hintergrund um 360 Grad drehen (aber weniger als die). Wie richte ich mich aus?

2. Wenn ich auf meinem Laptop zu sehen, kann ich das Bild drehen, aber es scheint die Bildschirmabmessungen Unterbau

Gibt es eine Leitlinie, wie man ein bestimmtes Hintergrundbild als three.js paßt perfekt zu Panorama?

Answer 1

Soweit ich weiß, gibt es keine Richtlinie, aber Sie können mit den three.js Beispiele testen:

• Für equirectangular (Sie equirectangular Bilder ziehen über können sie testen)
• Für dualfisheye

es gibt auch cubic map here, aber es ist keine gewöhnliche oder einfache Möglichkeit, Panoramen zu schaffen, und dieser Fall funktioniert es über CSS, nicht WebGL.

Wie Sie in der WebGL equirectangular Panorama-Code sehen können, wäre der richtige Code sein:

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