Skip to content

Instantly share code, notes, and snippets.

@jonasjohansson

jonasjohansson/worldToCubeMap.js

Created June 24, 2018 09:36
Show Gist options
  • Save jonasjohansson/20c9f6243b71bfdb91dffa7519d3794d to your computer and use it in GitHub Desktop.
Save jonasjohansson/20c9f6243b71bfdb91dffa7519d3794d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
worldToCubeMap.js
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
const createCam = (debug = false) => {
let arr = [];
for (let i = 0; i < 6; i++){
let camera = new THREE.PerspectiveCamera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 100, 2000000 );
arr.push( camera );
if (debug){
camera.updateProjectionMatrix();
var helper = new THREE.CameraHelper( camera );
scene.add( helper );
}
}
arr[0].lookAt (new THREE.Vector3(1,0,0));
arr[1].lookAt (new THREE.Vector3(0,0,1));
arr[2].lookAt (new THREE.Vector3(-1,0,0));
arr[3].lookAt (new THREE.Vector3(0,0,-1));
arr[4].lookAt (new THREE.Vector3(0,1,1));
arr[5].lookAt (new THREE.Vector3(0,-1,1));
arr[4].rotation.x = 90 * Math.PI / 180;
arr[5].rotation.x = -90 * Math.PI / 180;
return arr;
}
const renderCam = () => {
// LEFT
v = [ 1, 0.33 * SCREEN_HEIGHT + 1, 0.25 * SCREEN_WIDTH - 2, 0.33 * SCREEN_HEIGHT - 2 ]
renderer.setViewport(v[0],v[1],v[2],v[3]);
renderer.setScissor(v[0],v[1],v[2],v[3]);
renderer.setScissorTest(true);
cameras[0].updateProjectionMatrix();
renderer.render( scene, cameras[0] );
// MID
v = [ 0.25 * SCREEN_WIDTH + 1, 0.33 * SCREEN_HEIGHT + 1, 0.25 * SCREEN_WIDTH - 2, 0.33 * SCREEN_HEIGHT - 2 ]
renderer.setViewport(v[0],v[1],v[2],v[3]);
renderer.setScissor(v[0],v[1],v[2],v[3]);
renderer.setScissorTest(true);
cameras[1].updateProjectionMatrix();
renderer.render( scene, cameras[1] );
// RIGHT
v = [ 0.5 * SCREEN_WIDTH + 1, 0.33 * SCREEN_HEIGHT + 1, 0.25 * SCREEN_WIDTH - 2, 0.33 * SCREEN_HEIGHT - 2 ]
renderer.setViewport(v[0],v[1],v[2],v[3]);
renderer.setScissor(v[0],v[1],v[2],v[3]);
renderer.setScissorTest(true);
cameras[2].updateProjectionMatrix();
renderer.render( scene, cameras[2] );
// BACK
v = [ 0.75 * SCREEN_WIDTH + 1, 0.33 * SCREEN_HEIGHT + 1, 0.25 * SCREEN_WIDTH - 2, 0.33 * SCREEN_HEIGHT - 2 ]
renderer.setViewport(v[0],v[1],v[2],v[3]);
renderer.setScissor(v[0],v[1],v[2],v[3]);
renderer.setScissorTest(true);
cameras[3].updateProjectionMatrix();
renderer.render( scene, cameras[3] );
// TOP
v = [ 0.25 * SCREEN_WIDTH + 1, 0, 0.25 * SCREEN_WIDTH - 2, 0.33 * SCREEN_HEIGHT - 2 ]
renderer.setViewport(v[0],v[1],v[2],v[3]);
renderer.setScissor(v[0],v[1],v[2],v[3]);
renderer.setScissorTest(true);
cameras[4].updateProjectionMatrix();
renderer.render( scene, cameras[4] );
// BOTTOM
v = [ 0.25 * SCREEN_WIDTH + 1, 0.66 * SCREEN_HEIGHT + 1, 0.25 * SCREEN_WIDTH - 2, 0.33 * SCREEN_HEIGHT - 2 ]
renderer.setViewport(v[0],v[1],v[2],v[3]);
renderer.setScissor(v[0],v[1],v[2],v[3]);
renderer.setScissorTest(true);
cameras[5].updateProjectionMatrix();
renderer.render( scene, cameras[5] );
}
const cameras = createCam(true);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment