Rotate the camera around an object using the Buttons in ThreeJS? - three.js

Question

I have STL model loaded in my scene.
I want to show Left, Right, Top, Bottom and Front, Back side of my model by rotating camera.
I want exactly like Reference this. Free movement of camera and set different views. another reference ThreeJS Reference Example but this code is not Open Source.
var camera, scene, renderer;
var geometry, material, mesh;
let controls;
init();
animate();
function init() {
let aspectRatio = window.innerWidth / window.innerHeight;
let frustumSize = 2;
camera = new THREE.OrthographicCamera(frustumSize * aspectRatio / -2,
frustumSize * aspectRatio / 2,
frustumSize / 2, frustumSize / -2,
-50,
50);
camera.position.z = 1;
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xD3D3D3);
document.body.appendChild(renderer.domElement);
let frontlight = new THREE.DirectionalLight(0x808080, .3);
scene.add(frontlight);
ambientLight = new THREE.AmbientLight(0xffffff, 0.7);
scene.add(ambientLight);
createControls();
loadSTL();
}
function createControls() {
controls = new THREE.TrackballControls(camera, renderer.domElement);
}
window.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 49: //Top View
// setView(new THREE.Vector3(0, 0, 1));
setView(new THREE.Vector3(0, 0, 1), new THREE.Vector3(0, 0, 0));
break;
case 50: //Bottom View
setView(new THREE.Vector3(0, 0, -1), new THREE.Vector3(Math.PI, 0, 0));
break;
case 51: //Left View
setView(new THREE.Vector3(-1, 0, 0), new THREE.Vector3(Math.PI / 2, (-Math.PI / 2), 0));
break;
case 52: //Right View
setView(new THREE.Vector3(1, 0, 0), new THREE.Vector3(Math.PI / 2, Math.PI / 2, 0));
break;
case 53: //Front View
setView(new THREE.Vector3(0, 1, 0), new THREE.Vector3(-(Math.PI / 2), 0, Math.PI));
break;
case 54: //Back View
setView(new THREE.Vector3(0, -1, 0), new THREE.Vector3(Math.PI / 2, 0, 0));
break;
}
});
function setView(offSetFactor, axisAngle) {
const offsetUnit = camera.position.length();
const offSet = new THREE.Vector3(offsetUnit * offSetFactor.x,
offsetUnit * offSetFactor.y,
offsetUnit * offSetFactor.z);
const center = new THREE.Vector3();
const finishPos = center.add(offSet);
const euler = new THREE.Euler(axisAngle.x, axisAngle.y, axisAngle.z);
const finishQuaterion = new THREE.Quaternion().copy(camera.quaternion).setFromEuler(euler);
/* let boundingBox = new THREE.Box3().setFromObject(scene);
let boxCenter = new THREE.Vector3();
boundingBox.getCenter(boxCenter); */
const duration = 400;
const start = performance.now();
const maxAlpha = 1;
function loop() {
const now = performance.now();
const delta = now - start;
const alpha = Math.min(delta / duration, maxAlpha);
camera.position.lerp(finishPos, alpha);
controls.update();
camera.quaternion.slerp(finishQuaterion, alpha);
camera.up.set(0, 1, 0);
controls.update();
if (alpha !== maxAlpha)
return requestAnimationFrame(loop)
/* camera.lookAt(boxCenter);
controls.target.set(boxCenter.x,boxCenter.y,boxCenter.z);
*/
}
loop();
}
function loadSTL() {
let material = new THREE.MeshPhongMaterial({
color: 0xffdead,
side: THREE.DoubleSide,
});
var stlLoader = new THREE.STLLoader();
stlLoader.load('https://cdn.glitch.global/3c40c6ea-d629-4a1b-8129-bd041944a124/monkey.stl?v=1659713089046',
function(geometry) {
var material = new THREE.MeshPhongMaterial({
color: 0xff5533
});
var meshSTL = new THREE.Mesh(geometry, material);
scene.add(meshSTL);
fitToScreen(scene, camera, controls);
});
}
function fitToScreen(group, camera, controls) {
let boundingBox = new THREE.Box3().setFromObject(group);
let distance = boundingBox.min.distanceTo(boundingBox.max) * 0.1;
let boxCenter = new THREE.Vector3();
boundingBox.getCenter(boxCenter);
camera.position.set(boxCenter.x, boxCenter.y, distance);
camera.lookAt(boxCenter);
controls.target.set(boxCenter.x, boxCenter.y, boxCenter.z);
camera.updateProjectionMatrix();
}
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
Here is JSFiddle link what I implemented so far use 1 to 6 keys to change Views. In am not able to set left, right and front view properly.
I am using Trackball controls and orthographic camera this is my need I cannot change camera and controls. There is one library Gizmo Library but this library work specifically for orbit controls
I want to rotate camera by clicking on button. I know once I know how to rotate camera properly I can hook up UI with this but just FYI. I will keep Six buttons to set this views.
Here is what I tried So far