JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style=z-index:10000 " id="info "></div>
JavaScript
var camera,cameraO,activeCamera, renderer, scene;
widthSize = $('#info').width();
heighSize = $('#info').height();
renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(
50, // Field of view
4 / 3, // Aspect ratio
0.1, // Near plane
10000 // Far plane
);
camera.position.set(0, 5, 0); // offset the camera a bit
camera.lookAt(scene.position);
scene.add(camera); // don't forget this
//Camera 2
cameraO = new THREE.OrthographicCamera(-2, 2, -2, 2, 1, 100);
cameraO.position.set(0,10, 0)
cameraO.lookAt(scene.position)
scene.add(cameraO);
//Active camera
activeCamera = cameraO;
var axes = new THREE.AxisHelper(); // add axes
scene.add(axes);
var cube = new THREE.Mesh(
new THREE.CubeGeometry(1, .1, .1),
new THREE.MeshLambertMaterial({
color: 0xff0000
})
);
cube.position.set(0.5, 0, 0);
scene.add(cube);
var cube = new THREE.Mesh(
new THREE.CubeGeometry(.1, 1, .1),
new THREE.MeshLambertMaterial({
color: 0x00ff00
})
);
cube.position.set(0, 0.5, 0);
scene.add(cube);
var cube = new THREE.Mesh(
new THREE.CubeGeometry(.1, .1, 1),
new THREE.MeshLambertMaterial({
color: 0x0000ff
})
);
cube.position.set(0, 0, 0.5);
scene.add(cube);
var light = new THREE.PointLight(0xFFFFFF);
light.position.set(20, 20, 20);
scene.add(light);
animate();
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
var timer = new Date().getTime() * 0.001;
camera.lookAt(scene.position);
renderer.render(scene, activeCamera);
}
document.addEventListener('keydown', onKeyDown, false);
function onKeyDown(event) {
switch (event.keyCode) {
case 79:
/*O*/
activeCamera = cameraO;
break;
case 80:
/*P*/
activeCamera = camera;
break;
}
}