threejs 相机控制camera-controls鼠标和触摸

安装

npm i camera-controls

官网地址：相机控制 - npm (npmjs.com)

相机控制

three.js 的相机控件，类似于 THREE。OrbitControls 还支持平滑过渡和 es6 导入。

演示

相机移动	用户输入
轨道旋转	鼠标左键拖动/触摸：单指移动
多莉（变焦）	鼠标中键拖动，或鼠标滚轮/触摸：双指捏合或捏出
卡车（平底锅）	鼠标右键拖动/触摸：两指移动或三指移动

• 基本
• 正交
• 合身和衬垫

用法

import * as THREE from 'three';
import CameraControls from 'camera-controls';

CameraControls.install( { THREE: THREE } );

// snip ( init three scene... )
const clock = new THREE.Clock();
const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 );
const cameraControls = new CameraControls( camera, renderer.domElement );

( function anim () {

	// snip
	const delta = clock.getDelta();
	const hasControlsUpdated = cameraControls.update( delta );

	requestAnimationFrame( anim );

	if ( hasControlsUpdated ) {

		renderer.render( scene, camera );

	}
} )();

构造 函数

CameraControls( camera, domElement, options )

• camera是要控制的三.js透视相机。
• domElement是可拖动区域的 HTML 元素。
• options在对象中。
  • ignoreDOMEventListeners：默认值为 。if ，鼠标和触摸事件侦听器将被忽略，您可以改为附加处理程序。falsetrue

性能

• .enabled：默认值为 。是否启用控件。true
• .minDistance：默认值为 。小车的最小距离。0
• .maxDistance：默认值为 。小车的最大距离。Infinity
• .minPolarAngle：默认值为 ，以弧度为单位。0
• .maxPolarAngle：默认值为 ，以弧度为单位。Math.PI
• .minAzimuthAngle：默认值为 ，以弧度为单位。-Infinity
• .maxAzimuthAngle：默认值为 ，以弧度为单位。Infinity
• .dampingFactor：默认值为 。0.05
• .draggingDampingFactor：默认值为 。0.25
• .dollySpeed：默认值为 。鼠标滚轮推车的速度。1.0
• .truckSpeed：默认值为 。卡车和基座的拖曳速度。2.0
• .verticalDragToForward：默认值为 。与three.js的OrbitControls相同。false.screenSpacePanning
• .dollyToCursor：默认值为 。推入鼠标光标坐标。false

事件

使用您可以订阅这些事件。addEventListener( eventname, function )

• controlstart：当用户开始通过鼠标/触摸控制相机时触发。
• control：当用户控制相机（拖动）时触发。
• controlend：当用户结束控制相机时触发。
• update：更新相机位置时触发。

方法

rotate( rotX, rotY, enableTransition )

旋转方位角 （theta） 和极角 （phi）。 并且是弧度。 在布尔值中rotXrotYenableTransition

rotateTo( rotX, rotY, enableTransition )

将方位角 （theta） 和极角 （phi） 旋转到给定点。

dolly( distance, enableTransition )

推车进/出摄像机位置。 在一个数字中。 在布尔值中distanceenableTransition

dollyTo( distance, enableTransition )

推车进/出摄像机位置到给定距离

truck( x, y, enableTransition )

使用当前方位角的卡车和基座摄像机。

moveTo( x, y, z, enableTransition )

将位置移动到给定点。target

forward( distance, enableTransition )

向前/向后移动。

fitTo( meshOrBox3, enableTransition, { paddingTop?: number = 0, paddingLeft?: number = 0, paddingBottom?: number = 0, paddingRight?: number = 0 } )

使视口适合对象边界框或边界框本身。填充物是单位的。

setLookAt( positionX, positionY, positionZ, targetX, targetY, targetZ, enableTransition )

它将相机移动到 中，并使其看起来 。positiontarget

lerpLookAt( positionAX, positionAY, positionAZ, targetAX, targetAY, targetAZ, positionBX, positionBY, positionBZ, targetBX, targetBY, targetBZ, x, enableTransition )

与 相同，但它在两种状态之间插值。setLookAt

setPosition( positionX, positionY, positionZ, enableTransition )

setLookAt没有目标，就一直盯着当前的目标。

setTarget( targetX, targetY, targetZ, enableTransition )

setLookAt没有位置，保持原地不动。

getPosition( out )

返回其当前位置。

getTarget( out )

返回其当前凝视目标。

saveState()

将当前摄像机位置设置为默认位置

reset( enableTransition )

将所有旋转和位置重置为默认值。

update( delta )

更新相机位置和方向。这应该在滴答循环中调用，如果需要重新渲染，则返回。 是上一次更新调用之间的增量时间。truedelta

toJSON()

获取 JSON 字符串中的所有状态

fromJSON( json, enableTransition )

使用 JSON 重现控件状态。 是 anim 或不在布尔值中的位置。enableTransition

dispose()

释放 cameraControls 实例本身，删除所有 eventListener。