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,基本的姿勢已經解鎖了。沖刺。

?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容