1. 引入three.js和OrbitControls.js
import * as THREE from "three"
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
可以看一下OrbitControls.js源码,方便理解:https://threejs.org/examples/jsm/controls/OrbitControls.js文章来源:https://www.toymoban.com/news/detail-591214.html
2. 重新配置鼠标和手势文章来源地址https://www.toymoban.com/news/detail-591214.html
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
// 重置鼠标行为
this.controls.mouseButtons = {
LEFT:THREE.MOUSE.PAN, // 左键 拖动(默认旋转:ROTATE)
MIDDLE:THREE.MOUSE.DOLLY, // 滑轮 缩放
RIGHT:THREE.MOUSE.ROTATE // 右键 旋转(默认拖动:PAN)
}
// 重置手势行为
this.controls.touches = {
ONE: THREE.TOUCH.PAN, // 单个手指 拖动(默认旋转:ROTATE)
TWO: THREE.TOUCH.DOLLY_PAN // 两个手指 缩放
};
this.controls.update()
到了这里,关于three.js OrbitControls.js 修改配置鼠标行为mouse和手势行为touch的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!