camera-proxy
TypeScript icon, indicating that this package has built-in type declarations

0.1.24 • Public • Published

通用相机模块

安装

js/ts

npm i -S camera-proxy

结构

本相机模块的设计目标是统一不同平台的机位控制逻辑。

CameraProxy,核心类,负责管理相机状态,在 3D 机位和地图机位之间做转换, 可以从这个类上读取 3D 机位,同步给你场景中的相机

AnimatedCameraProxy 继承自 CameraProxy, 为每种状态控制接口增加了带缓动的版本,并提供可选的“惰性动画”特性,为所有的状态变化增加阻力

PointerControl 类提供鼠标控制功能

TouchControl 类提供多点触控功能

RemoteSyncer 类提供远程同步控制功能

Useage

基本流程

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,
})

demo

  • demo/basic_pointer.ts: 鼠标控制
  • demo/basic_touch.ts: 触摸屏控制
  • demo/animated_pointer.ts: 缓动
  • demo/remote_master.ts: 远程控制(主控端)
  • demo/remote_slave.ts: 远程控制(被控端)

API

详见 docs源码

Readme

Keywords

none

Package Sidebar

Install

npm i camera-proxy

Weekly Downloads

0

Version

0.1.24

License

MIT

Unpacked Size

1.47 MB

Total Files

130

Last publish

Collaborators

  • gaomeng1900