three.js OrbitControls.js 修改配置鼠标行为mouse和手势行为touch

TWL1203

已于 2022-09-01 13:55:54 修改

阅读量1.4k

点赞数 1

文章标签： javascript vue.js 前端

于 2022-09-01 13:54:50 首次发布

本文链接：https://blog.csdn.net/TWL1203/article/details/126641728

版权

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

2. 重新配置鼠标和手势

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