indoorcontrols
v1.1.1
Published
edit from orbitControls in threejs, its just for panorama view for no changing camera position
Downloads
4
Maintainers
Readme
Description
This controls is edited from orbitControls from threejs.
- This controls can be used for exploring paranoma sphere, pointcloud, 3D models, also can be used for walking
- Mouse left rotates camera view (camera not moving), Mouse middle moves into viewspace (point moving), Mouse right translates camera position
- This controls will rotate like drag or catch the point when hold left click, and will be influenced by camera fov.
- This controls doesnot suit for mobile(may future), only for PC now
Using Guide
You need threejs to use this, then install it
npm i indoorcontrols
import * as THREE from 'three'
import { IndoorControls } from 'indoorcontrols'
const controls = new IndoorControls(camera, renderer.domElement)
const clock = new THREE.Clock()
...
render(){
...
controls.update(clock.getDelta())
...
}
Document
The damping has changed to make the rotate move the position smoothly And it is enabled default. The dampingFactor will be useful when it decrease(but 10 is better)
controls.enableDamping = true
controls.dampingFactor = 10
To make move from screenspace,so this is true in default
controls.screenSpacePanning = true
说明
室内或室外中使用的 Controls
根据 threejs 的 orbitControls 更改而来
- 该 Controls 用于同时浏览全景球,浏览点云或模型,也可用于路人行走等场景
- 左键旋转视角(不动相机位置),中键按屏幕点移动,右键平移(按屏幕)
- 该 Controls 在旋转时会让物体跟随鼠标旋转,类似于抓手或手型工具(在边缘会有畸变)
- 暂时只对 pc 版改动, 未对移动改动
使用
import * as THREE from 'three'
import { IndoorControls } from 'indoorcontrols'
const controls = new IndoorControls(camera, renderer.domElement)
const clock = new THREE.Clock()
...
render(){
...
controls.update(clock.getDelta())
...
}
文档
阻尼的作用被改为仅让移动顺滑而不影响实际的移动效果,并默认开启.阻尼系数减少时会明显效果,但 10 是比较好的
controls.enableDamping = true
controls.dampingFactor = 10
为了让平移为屏幕空间移动,默认开启
controls.screenSpacePanning = true