Currently experimenting with creating a basic multi-resolution panorama in Three.js.
Successfully implemented the cubic projection using the following code:
mesh = new THREE.Mesh(new THREE.BoxGeometry(512, 512, 512, 20, 20, 10, 10), new THREE.MeshFaceMaterial(materials));
mesh.scale.x = -1;
scene.add(mesh);
I am attaching tiles to a parent element and attempting to align the cube faces with the background box.
var face_b = new THREE.Object3D();
face_b.position.z = -511;
scene.add(face_b);
var face_f = new THREE.Object3D();
face_f.position.z = 511;
face_f.rotation.y = -180;
scene.add(face_f);
var face_l = new THREE.Object3D();
face_l.position.z = 0;
face_l.position.x = 512;
face_l.rotation.y = -90;
scene.add(face_l);
var face_r = new THREE.Object3D();
face_r.position.x = -512;
face_r.position.z = 0;
face_r.rotation.y = 90;
scene.add(face_r);
var face_u = new THREE.Object3D();
face_u.position.z = -511;
//scene.add(face_u);
var face_d = new THREE.Object3D();
face_d.position.z = -511;
//scene.add(face_d);
The rear face (b) is functioning correctly.
However, the rest of the faces are displayed but their rotation seems to be off and not properly aligned.
Is my usage of rotation correct in this scenario?