Have a good day to everyone. I have a problem with zoom in/out with my mouse middle mouse button. Firstly, I can move zoom in/out. “Camera2” is a combine camera. “Camera” is changing according to buttons. Perspective view --> camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10000 );
left view --> camera = new THREE.OrthographicCamera(- halfWidth, halfWidth, halfHeight, - halfHeight, -500,1000 );
My other codeblocks are:
function setupScene(doUseRaycaster) {
useRaycaster = doUseRaycaster;
raycaster = new THREE.Raycaster();
scene = new THREE.Scene();
var viewer = document.getElementById('viewer');
width = viewer.offsetWidth; // So that is stays inside the viewer div
height = window.innerHeight; // full page
// For small grid
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10000 );
//camera = new THREE.CombinedCamera( width / 2, height / 2, 75, 0.1, 10000, -500, 1000 );
//camera.lookAt(0, 0, 0);
camera.position.x = -30;
camera.position.y = 500;
camera.position.z = 500;
camera.up.set(0, 1, 0);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer2 = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0x000000, 0); // the default
renderer2.setSize(150, 150);
inset = document.getElementById('inset');
viewer.appendChild(renderer.domElement);
inset.appendChild(renderer2.domElement);
var ambientLight = new THREE.AmbientLight(0xbbbbbb);
scene.add(ambientLight);
var lights = [];
lights[0] = new THREE.PointLight(0xececec, 0.25, 0);
lights[1] = new THREE.PointLight(0xececec, 0.25, 0);
lights[2] = new THREE.PointLight(0xececec, 0.25, 0);
lights[0].position.set(0, 100, 0);
lights[1].position.set(100, 200, 100);
lights[2].position.set(-100, -200, -100);
scene.add(lights[0]);
scene.add(lights[1]);
scene.add(lights[2]);
window.addEventListener('mousemove', onMouseMove, false);
window.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
window.addEventListener("keydown", onKeyDown, false);
function onWindowResize() {
camera.setSize(width, height);
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
scene2 = new THREE.Scene();
camera2 = new THREE.CombinedCamera(width / 2, height / 2, 75, 0.1, 10000, -500, 1000);
camera2.position.x = -30;
camera2.position.y = 10;
camera2.position.z = 100;
camera2.up = camera.up;
camera2.lookAt(0, 0, 0);
var interval = GRID_SIZE / MAJOR_AXIS
addGridToScene(GRID_SIZE, MAJOR_AXIS, MINOR_AXIS, [0, 0, 0], [0, 0, 0]);
axis2 = buildMiniAxis(50);
scene2.add(axis2);
miniAxisLabels("X", 50, -5, 0);
miniAxisLabels("Y", 5, 50, 0);
miniAxisLabels("Z", 0, 5, 50);
var gui = new dat.GUI();
gui.add(guicontrols, 'textSize', 0, 120);
gui.add(guicontrols, 'showFrontCurve');
gui.add(guicontrols, 'showBackCurve');
var geometry = new THREE.BoxGeometry( 30, 30, 30 );
var material = new THREE.MeshNormalMaterial();
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 150;
mesh.position.y = 150;
mesh.position.z = 0;
scene.add( mesh );
objects.push( mesh );
console.log(objects);
console.log(camera.fov, camera.aspect, camera.near, camera.far);
console.log(camera2);
const orbitControls = new THREE.OrbitControls( camera, renderer.domElement );
const dragControls = new THREE.DragControls( objects, camera, renderer.domElement );
dragControls.addEventListener( 'dragstart', function () { orbitControls.enabled = false; } );
dragControls.addEventListener( 'dragend', function () { orbitControls.enabled = true; } );
orbitControls.update();
}
But, when I clicked “Left View” button or “Perspective View” button. I cannot make zoom in/out. In “Inspect Element” console, there is no error.
function ugurToPerspective() {
console.log("near");
console.log(camera.near);
console.log("far");
console.log(camera.far);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10000 );
//camera.lookAt(0, 0, 0);
camera.position.x = -30;
camera.position.y = 500;
camera.position.z = 500;
camera.up.set(0, 1, 0);
camera.updateProjectionMatrix();
}
function ugurToOrthographic() {
// Switches to the Orthographic camera estimating viewport from Perspective
var zoom = 3;
var fov = 70;
var aspect = window.innerWidth/window.innerHeight;
var near = 0.1;
var far = 10000;
// The size that we set is the mid plane of the viewing frustum
var hyperfocus = ( near + far ) / 2;
var halfHeight = Math.tan( fov * Math.PI / 180 / 2 ) * hyperfocus;
var planeHeight = 2 * halfHeight;
var planeWidth = planeHeight * aspect;
var halfWidth = planeWidth / 2;
halfHeight /= zoom;
halfWidth /= zoom;
camera = new THREE.OrthographicCamera(- halfWidth, halfWidth, halfHeight, - halfHeight, -500,1000 );
camera.updateProjectionMatrix();
}
function setOrthographic() {
camera2.zoom = 40;
ugurToOrthographic();
camera2.toOrthographic();
camera.zoom = 3;
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 0;
// Removing the grid and background image, both will be redrawn.
removeAllObjectsByName("axis_labels", scene2);
removeAllObjectsByName("helpergrid", scene);
removeAllObjectsByName("images", scene);
removeAllObjectsByName("mini_axis", scene2);
}
function setPerspective() {
camera2.zoom = 1;
console.log("ugurrrrrrrrr");
console.log(camera);
ugurToPerspective();
//camera.lookAt(0, 0, 0);
camera.position.x = -30;
camera.position.y = 50;
camera.position.z = 100;
camera.zoom = 0.1;
camera.up.set(0, 1, 0);
camera2.up = camera.up;
console.log(camera);
camera2.toPerspective();
lookAtScene = true;
camera2.position.copy(camera.position);
camera2.lookAt(scene2.position);
// Removing the grid and background image, both will be redrawn.
removeAllObjectsByName("axis_labels", scene2);
removeAllObjectsByName("helpergrid", scene);
removeAllObjectsByName("images", scene);
removeAllObjectsByName("mini_axis", scene2);
addGridToScene(GRID_SIZE, MAJOR_AXIS, MINOR_AXIS, [0, 0, 0], [0, 0, 0]);
axis2 = buildMiniAxis(50);
scene2.add(axis2);
miniAxisLabels("X", 50, -5, 0);
miniAxisLabels("Y", 5, 50, 0);
miniAxisLabels("Z", 0, 5, 50);
}
/* The next 6 functions camera parameters based on asthetics of current grid (100,10),
and redraw the grid where needed so that it appears behind to the model, facing the screen.*/
function leftView(boolRotateX = false) {
var picture = document.getElementById("checkboxleft");
var xray = document.getElementById("checkboxleftXray");
setOrthographic();
ugurToOrthographic();
//camera.toLeftView();
camera.rotation.x = 0;
camera.rotation.y = - Math.PI / 2;
camera.rotation.z = 0;
camera.rotationAutoUpdate = false;
console.log("left view camera")
console.log(camera);
camera2.toLeftView();
lookAtScene = false;
camera2.position.copy(camera.position);
camera2.lookAt(scene2.position);
if (picture && picture.checked == true) {
picture_value = JSON.parse(picture.value)
imgren = renderImage('left', picture_value.url, picture_value.rot, picture_value.pos[0], picture_value.pos[1], picture_value.pos[2], boolRotateX);
}
if (xray && xray.checked == true) {
xray_value = JSON.parse(picture.value)
imgren = renderImage('leftXray', xray_value.url, xray_value.rot, xray_value.pos[0], xray_value.pos[1], xray_value.pos[2], boolRotateX);
}
addGridToScene(GRID_SIZE, MAJOR_AXIS, MINOR_AXIS, [0, 0, Math.PI / 2], [-5, 0, 0]);
axis2 = buildMiniAxis(50);
axis2.rotation.y = Math.PI / 2;
scene2.add(axis2);
miniAxisLabels("Y", 5, 50, 0);
miniAxisLabels("Z", 55, -5, 0);
}