Here, i have a multiple set of object. When I intersect to a object using raycaster I updated the controls target respective to the object so that the remaining objects can rotate respective to the intersected object as center. But what happening is that when I intersect the object and change the controls target it object which get intersected is moved to the center of the scene.Here, I have my custom mouse pointer zoom in event where I would have set the orbit controls zoom to false and would have added my event.
So, I have no idea why the object gets moves to the center of the scene when I update the controls target to the objects position.
Kindly, please help me out with the issue
var container;
var camera, scene, renderer;
var controls;
var zoomIn;
var object;
var mouseVector = new THREE.Vector3();
var startMousePos = new THREE.Vector3();
var intersectedPoint = new THREE.Vector3();
var intersectedOffset = new THREE.Vector3();
var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); // create once
var intersects;
var data;
var center;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.001, 500000);
camera.position.z = 1000;
scene = new THREE.Scene();
console.log(scene)
scene.background = new THREE.Color(0xf0f0f0);
scene.add(new THREE.AmbientLight(0x505050));
var light = new THREE.SpotLight(0xffffff, 1.5);
light.position.set(0, 500, 2000);
light.angle = Math.PI / 9;
light.castShadow = true;
light.shadow.camera.near = 1000;
light.shadow.camera.far = 4000;
light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;
scene.add(light);
var geometry = new THREE.BoxBufferGeometry(20, 20, 20);
// var zoomIn = document.getElementById('zoom-in');
for (var i = 0; i < 200; i++) {
object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
object.position.x = Math.random() * 1600 - 800;
object.position.y = Math.random() * 900 - 450;
object.position.z = Math.random() * 900 - 500;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
object.castShadow = true;
object.receiveShadow = true;
scene.add(object);
}
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
window.addEventListener("mousemove", event => {
mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;
if (!intersects) {
return;
} else {
if (!data) {
return;
} else {
var boundingBox = new THREE.Box3();
boundingBox.setFromObject(data[0].object);
var center = boundingBox.getCenter();
controls.target.copy(center);
console.log(center)
data = null;
}
}
});
window.addEventListener("wheel", event => {
var factor = 50;
var factorIntersected = 15;
var mX = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
var mY = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 0.1);
raycaster.setFromCamera(mouse, camera);
intersects = raycaster.intersectObjects(scene.children);
vector.unproject(camera);
vector.sub(camera.position);
if (intersects.length > 0) {
intersectedPoint = intersects[0].point;
data = intersects;
if (event.deltaY < 0) {
camera.position.addVectors(camera.position, vector.setLength(factorIntersected));
controls.target.addVectors(controls.target, vector.setLength(factorIntersected));
} else {
camera.position.subVectors(camera.position, vector.setLength(factorIntersected));
controls.target.subVectors(controls.target, vector.setLength(factorIntersected));
}
}
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;
container.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement, renderer, scene);
controls.enableRotate = true;
controls.enablePan = true;
controls.enableZoom = false;
window.addEventListener('resize', onWindowResize, false);
}
function onZoomIn(e) {
}
function mouseWheel(event) {
let x = 2 * event.clientX / window.innerWidth - 1;
let y = 1 - 2 * event.clientY / window.innerHeight;
let cursorpos = new THREE.Vector3(x, y, 1);
cursorpos.unproject(camera);
//focus on the mouse cursor
let dir = new THREE.Vector3().copy(cursorpos).sub(camera.position).normalize();
//pasue
let dist = "some formula add"
let shift = new THREE.Vector3().copy(dir).multiplyScalar(dist * 0.1);
camera.position.add(shift);
controls.position0.add(shift);
controls.target.add(shift);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
requestAnimationFrame(animate);
controls.update();
render();
}
function render() {
renderer.render(scene, camera);
}
document.addEventListener('mouseup', function (event) {
onZoomIn();
});