How to switch the view with TweenJS?

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);
	let position1 = camera1.position.set(0,50,150);
	let target1 =,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
			x1: newP.x,
			y1: newP.y,
			z1: newP.z,
			x2: newT.x,
			y2: newT.y,
			z2: newT.z,
		tween.onUpdate(function () { = this.x1; = this.y1; = this.z1; = this.x2; = this.y2; = this.z2;
			tween.onComplete(function () {
				_this.controls.enabled = true;
				callBack && callBack();
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

Here is an example that dynamically creates html buttons and css2d labels from imported JSON.
Press buttons or css2d label, and it will tween to location configured in JSON.
Annotations : Annotations (
Press <> bottom right of working example for JavaScript source