three.js的 轨道控制器 orbitControls 详细学习 参数

three.js的 轨道控制器 orbitControls 详细学习 参数
https://threehub.cn/#/codeMirror?navigation=ThreeJS&classify=basic&id=orbControls
enabled: boolean
控制器是否启用。
target: Vector3
控制相机围绕其旋转的目标点。
minDistance: number
缩放的最小距离。
maxDistance: number
缩放的最大距离。
minPolarAngle: number
极角的最小值。
maxPolarAngle: number
极角的最大值。
minAzimuthAngle: number
方位角的最小值。
maxAzimuthAngle: number
方位角的最大值。
enableDamping: boolean
是否启用阻尼以实现平滑移动。
dampingFactor: number
阻尼系数，控制平滑移动的速度。
enableZoom: boolean
是否启用缩放功能。
zoomSpeed: number
缩放速度。
enableRotate: boolean
是否启用旋转功能。
rotateSpeed: number
旋转速度。
enablePan: boolean
是否启用平移功能。
panSpeed: number
平移速度。
screenSpacePanning: boolean
是否启用屏幕空间平移。
keyPanSpeed: number
按键平移速度。
autoRotate: boolean
是否启用自动旋转。
autoRotateSpeed: number
自动旋转速度。
方法:
update(): void
更新控制器状态。
listenToKeyEvents(domElement: HTMLElement): void
监听键盘事件。
saveState(): void
保存当前控制器状态。
reset(): void
重置控制器状态为初始状态。
dispose(): void
清理控制器所占用的资源，释放内存。

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GUI } from "three/addons/libs/lil-gui.module.min.js"

const box = document.getElementById('box')

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000)

camera.position.set(0, 1, 4)

const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })

renderer.setSize(box.clientWidth, box.clientHeight)

box.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)

const geomerty = new THREE.PlaneGeometry(1, 1)

const map = new THREE.TextureLoader().load(`https://threehub.cn/` + 'files/author/KallkaGo.jpg')

const material = new THREE.MeshBasicMaterial({ map , color: 0xf2f2f2, side: THREE.DoubleSide })

const mesh = new THREE.Mesh(geomerty, material)

scene.add(mesh)

animate()

function animate() {

  requestAnimationFrame(animate)

  controls.update()

  renderer.render(scene, camera)

}

scene.add(new THREE.AxesHelper(10), new THREE.GridHelper(10, 10))

const folder = new GUI()

folder.add(controls, 'autoRotate').name('自动旋转')

folder.add(controls, 'autoRotateSpeed').name('自动旋转速度')

folder.add(controls, 'enableDamping').name('阻尼')

folder.add(controls, 'dampingFactor').name('阻尼系数').min(0).max(1)

folder.add(controls, 'minDistance').name('最小距离')

folder.add(controls, 'maxDistance').name('最大距离')

folder.add(controls, 'maxAzimuthAngle', -2 * Math.PI, Math.PI * 2).name('水平旋转上限')

folder.add(controls, 'minAzimuthAngle', -2 * Math.PI, Math.PI * 2).name('水平旋转下限')

folder.add(controls, 'maxPolarAngle', 0, Math.PI).name('垂直旋转上限')

folder.add(controls, 'minPolarAngle', 0, Math.PI).name('垂直旋转下限')

folder.add(controls, 'maxTargetRadius').name('目标移动上限')

folder.add(controls, 'minTargetRadius').name('目标移动下限')

folder.add(controls, 'enablePan').name('平移')

folder.add(controls, 'panSpeed').name('平移速度')

folder.add(controls, 'enableRotate').name('旋转')

folder.add(controls, 'rotateSpeed').name('旋转速度')

folder.add(controls, 'enableZoom').name('缩放')

folder.add(controls, 'zoomSpeed').name('缩放速度')

folder.add(controls, 'zoomToCursor').name('光标为缩放中心')

folder.add(controls.target, 'x').name('目标位置x').listen()

folder.add(controls.target, 'y').name('目标位置y').listen()

folder.add(controls.target, 'z').name('目标位置z').listen()

folder.add({ '重置': () => folder.reset()}, '重置')

/**
 * 名称: 轨道控制器
 * 作者: 优雅永不过时 https://github.com/z2586300277
*/

原文地址：https://blog.csdn.net/guang2586/article/details/143619526

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！