vue-cli中使用threejs, 并实现OrbitControls鼠标控制效果

主要是接上一篇在vue-cli中使用threejs,并实现鼠标控制移动,以及点击交互效果

基于在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,基本的姿势已经解锁了。冲刺。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容