As the picture shows, the GUI has done, but i don’t know how to click the ‘view1’ button to switch to the corresponding view function
for now, the code is as follows:
function view1(){
camera1 = new THREE.PerspectiveCamera(50, 1, 0.1, 2000);
control1 = new OrbitControls(camera1, renderer.domElement);
camera1.position.set(0,50,150);
control1.target.set(0,0,150);
let position1 = camera1.position.set(0,50,150);
let target1 = control1.target.set(0,0,150);
function animateCamera(oldP, oldT, newP, newT, time, callBack) {
var _this = this;
var tween = new TWEEN.Tween({
x1: oldP.x, // camera x
y1: oldP.y, // camera y
z1: oldP.z, // camera z
x2: oldT.x, // center of controller x
y2: oldT.y, // center of controller y
z2: oldT.z, // center of controller z
});
tween.to({
x1: newP.x,
y1: newP.y,
z1: newP.z,
x2: newT.x,
y2: newT.y,
z2: newT.z,
});
tween.onUpdate(function () {
_this.camera.position.x = this.x1;
_this.camera.position.y = this.y1;
_this.camera.position.z = this.z1;
_this.controls.target.x = this.x2;
_this.controls.target.y = this.y2;
_this.controls.target.z = this.z2;
_this.controls.update();
});
tween.onComplete(function () {
_this.controls.enabled = true;
callBack && callBack();
});
tween.easing(TWEEN.Easing.Cubic.InOut);
tween.start();
}
animateCamera(camera.position,controls.position,position1,target1,3000);
}
const params = {view1: view1}
const gui = new GUI();
gui.add(params, 'view1');
and the console shows:
Uncaught TypeError: Cannot read properties of undefined (reading 'x')
at animateCamera (HDR-Background-Ver-test.html?_ijt=i7h5b9q1ks47vhsvh3htbaclq8:548:17)
at Object.view1 (HDR-Background-Ver-test.html?_ijt=i7h5b9q1ks47vhsvh3htbaclq8:577:5)
at HTMLButtonElement.<anonymous> (lil-gui.module.min.js:173:49)
So how to get current position of camera and controller target? Or there are other solutions?
There will be four views in the scene, have some ideas to reduce duplicate codes?
Note: views of controller targets are different, views of camera positions are different, animation of view switching process is needed