基于在vue-cli中使用threejs,并实现鼠标控制移动,以及点击交互效果这篇的代码结构,添加如下代码
vue-cli
中引入OrbitControls
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
methods: {
...,
start(){
...
// 添加鼠标控制事件
this.initControls()
},
...,
// 鼠标基础控制事件
initControls(){
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
// 定义左键拖动,滚轮放大缩小,右键不做操作
this.controls.mouseButtons = {
LEFT: THREE.MOUSE.PAN,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: null
}
this.controls.update()
},
}
OK,基本的姿势已经解锁了。冲刺。