JSFiddle - React, Tailwind, and code Playground

by jurito

JavaScript

var camera, clonedCamera, currentCamera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera();
    camera.projectionMatrix.fromArray({"0":0.0011943184436566975,"1":0.0006665963035643123,"2":0.00025596395831629936,"3":0.00025596395831629936,"4":-0.0011943184436566975,"5":0.0006665963035643123,"6":0.00025596395831629936,"7":0.00025596395831629936,"8":0,"9":0.0016328208976766337,"10":-0.00020899368920033573,"11":-0.00020899368920033573,"12":-0.08128879918361312,"13":0.23293261147889477,"14":0.4227763544957782,"15":1.0894430112283373});
    currentCamera=camera;
    scene.add(camera);
    
    //https://stackoverflow.com/questions/56428880/how-to-extract-camera-parameters-from-projection-matrix
    
    let fov = 2 * Math.atan(1/camera.projectionMatrix.elements[5]) * 180 / Math.PI;
		let near = camera.projectionMatrix.elements[14] / (camera.projectionMatrix.elements[10] - 1.0);
		let far = camera.projectionMatrix.elements[14] / (camera.projectionMatrix.elements[10] + 1.0);
    
    //not working
    clonedCamera = new THREE.PerspectiveCamera(fov,3/2,near,far);
    scene.add(clonedCamera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    
    document.body.addEventListener('click',()=>{
    	currentCamera=currentCamera===camera?clonedCamera:camera;
    })

}


function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, currentCamera);

}