threejs 相机控制camera-controls鼠标和触摸-Toy模板网

这篇具有很好参考价值的文章主要介绍了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。文章来源地址https://www.toymoban.com/news/detail-821012.html

到了这里，关于threejs 相机控制camera-controls鼠标和触摸的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

安装

相机控制

演示

用法

构造函数

性能

事件