import { PerspectiveCamera } from 'three'
import { CameraProxy } from 'camera-proxy'

const FOV = 40
const WIDTH = 1920
const HEIGHT = 1080

const camera = new PerspectiveCamera(FOV, WIDTH / HEIGHT, 100, 200000)
// 等下我们会主动更新，关掉自动更新可以节约一些运算，
// 如果相机还有有父级元素，则不能关掉自动更新
camera.matrixAutoUpdate = false

// 如果需要缓动动画，则使用 AnimatedCameraProxy 类并传入Timeline
const cam = new CameraProxy({
	cameraFOV: FOV,

	canvasHeight: WIDTH,
	canvasWidth: HEIGHT,

	onUpdate: (cam) => {
		// 每次机位发生变化后需要同步导向相机
		camera.position.fromArray(cam.position)
		camera.rotation.fromArray(cam.rotationEuler)
		camera.updateMatrix()
		camera.updateMatrixWorld()
	},
})

// 然后可以通过指令控制机位

// - 获取当先中心
const currentCenter = cam.center

// - 移动到新的中心
cam.setCenter([1000, 2000, 50])

// - 如果使用 AnimatedCameraProxy，还可以选择带缓动的接口
// cam.setCenterEase([1000, 2000, 50], 2000) // center, duration, easeF

import { PerspectiveCamera } from 'three'
import { CameraProxy, PointerControl } from 'camera-proxy'

// 同上

// 开启鼠标控制
const pointerControl = new PointerControl({
	camera: cam,
	element: renderer.domElement,
	// 默认情况下平移总是平行于地面的，可以加入该项来让平移相对于视觉平面
	// horizontal: false,
})

// 如果使用触摸板则用 TouchControl 类替换掉 PointerControl
// NOTE PointerControl 和 TouchControl 不能同时作用于一个 HTMLElement

// 控制端

import { RemoteSyncer } from 'camera-proxy'

// 同上

// 开启鼠标控制
const pointerControl = new PointerControl({
	camera: cam,
	element: renderer.domElement,
})

// 开启同步器

const syncer = new RemoteSyncer({
	camera: cam,
	channel: 'demo/001',
	role: 'master',
})

// 受控端

import { RemoteSyncer } from 'camera-proxy'

// 同上

// 开启同步器

const syncer = new RemoteSyncer({
	camera: cam,
	channel: 'demo/001',
	role: 'slave',
	tsl: true,
})