安裝

npm i?camera-controls

官網(wǎng)地址：相機(jī)控制 - npm (npmjs.com)

相機(jī)控制

three.js 的相機(jī)控件，類(lèi)似于 THREE。OrbitControls 還支持平滑過(guò)渡和 es6 導(dǎo)入。

演示

• 基本
• 正交
• 合身和襯墊

用法

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 );

	}
} )();

構(gòu)造 函數(shù)

CameraControls( camera, domElement, options )

• camera是要控制的三.js透視相機(jī)。
• domElement是可拖動(dòng)區(qū)域的 HTML 元素。
• options在對(duì)象中。
  • ignoreDOMEventListeners：默認(rèn)值為 。if ，鼠標(biāo)和觸摸事件偵聽(tīng)器將被忽略，您可以改為附加處理程序。falsetrue

性能

• .enabled：默認(rèn)值為 。是否啟用控件。true
• .minDistance：默認(rèn)值為 。小車(chē)的最小距離。0
• .maxDistance：默認(rèn)值為 。小車(chē)的最大距離。Infinity
• .minPolarAngle：默認(rèn)值為 ，以弧度為單位。0
• .maxPolarAngle：默認(rèn)值為 ，以弧度為單位。Math.PI
• .minAzimuthAngle：默認(rèn)值為 ，以弧度為單位。-Infinity
• .maxAzimuthAngle：默認(rèn)值為 ，以弧度為單位。Infinity
• .dampingFactor：默認(rèn)值為 。0.05
• .draggingDampingFactor：默認(rèn)值為 。0.25
• .dollySpeed：默認(rèn)值為 。鼠標(biāo)滾輪推車(chē)的速度。1.0
• .truckSpeed：默認(rèn)值為 。卡車(chē)和基座的拖曳速度。2.0
• .verticalDragToForward：默認(rèn)值為 。與three.js的OrbitControls相同。false.screenSpacePanning
• .dollyToCursor：默認(rèn)值為 。推入鼠標(biāo)光標(biāo)坐標(biāo)。false

事件

使用您可以訂閱這些事件。addEventListener( eventname, function )

• controlstart：當(dāng)用戶開(kāi)始通過(guò)鼠標(biāo)/觸摸控制相機(jī)時(shí)觸發(fā)。
• control：當(dāng)用戶控制相機(jī)（拖動(dòng)）時(shí)觸發(fā)。
• controlend：當(dāng)用戶結(jié)束控制相機(jī)時(shí)觸發(fā)。
• update：更新相機(jī)位置時(shí)觸發(fā)。

方法

rotate( rotX, rotY, enableTransition )

旋轉(zhuǎn)方位角 （theta） 和極角 （phi）。 并且是弧度。 在布爾值中rotXrotYenableTransition

rotateTo( rotX, rotY, enableTransition )

將方位角 （theta） 和極角 （phi） 旋轉(zhuǎn)到給定點(diǎn)。

dolly( distance, enableTransition )

推車(chē)進(jìn)/出攝像機(jī)位置。 在一個(gè)數(shù)字中。 在布爾值中distanceenableTransition

dollyTo( distance, enableTransition )

推車(chē)進(jìn)/出攝像機(jī)位置到給定距離

truck( x, y, enableTransition )

使用當(dāng)前方位角的卡車(chē)和基座攝像機(jī)。

moveTo( x, y, z, enableTransition )

將位置移動(dòng)到給定點(diǎn)。target

forward( distance, enableTransition )

向前/向后移動(dòng)。

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

使視口適合對(duì)象邊界框或邊界框本身。填充物是單位的。

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

它將相機(jī)移動(dòng)到 中，并使其看起來(lái) 。positiontarget

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

與 相同，但它在兩種狀態(tài)之間插值。setLookAt

setPosition( positionX, positionY, positionZ, enableTransition )

setLookAt沒(méi)有目標(biāo)，就一直盯著當(dāng)前的目標(biāo)。

setTarget( targetX, targetY, targetZ, enableTransition )

setLookAt沒(méi)有位置，保持原地不動(dòng)。

getPosition( out )

返回其當(dāng)前位置。

getTarget( out )

返回其當(dāng)前凝視目標(biāo)。

saveState()

將當(dāng)前攝像機(jī)位置設(shè)置為默認(rèn)位置

reset( enableTransition )

將所有旋轉(zhuǎn)和位置重置為默認(rèn)值。

update( delta )

更新相機(jī)位置和方向。這應(yīng)該在滴答循環(huán)中調(diào)用，如果需要重新渲染，則返回。 是上一次更新調(diào)用之間的增量時(shí)間。truedelta

toJSON()

獲取 JSON 字符串中的所有狀態(tài)

fromJSON( json, enableTransition )

使用 JSON 重現(xiàn)控件狀態(tài)。 是 anim 或不在布爾值中的位置。enableTransition

dispose()

釋放 cameraControls 實(shí)例本身，刪除所有 eventListener。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-821012.html

到了這里，關(guān)于threejs 相機(jī)控制camera-controls鼠標(biāo)和觸摸的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！