three.js 模型拖動之DragControls控制器

需求：

拖動場景內的模型

方案：

增加控制器DragControls 

1、引入控制器

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TransformControls } from "three/examples/jsm/controls/TransformControls";
import { DragControls } from "three/examples/jsm/controls/DragControls";

2、加載控制器

獲取場景內模型列表 ——》

      var objects = [];
      for (let i = 0; i < this.scene.children.length; i++) {
            if (this.scene.children[i].isMesh) {
                objects.push(this.scene.children[i]);
            }
        }

 

加載控制器TransformControls ——》

加載控制器DragControls ——》

      this.transformControls = new TransformControls(this.camera, this.renderer.domElement);
      this.scene.add(this.transformControls)
      this.dragControls = new DragControls(objects, this.camera, this.renderer.domElement);

 

3、更改模型位置 ——》

可選監聽：

dragstart 開始移動

drag

dragend 結束移動

hoveron 鼠標進入模型

hoveroff 鼠標離開模型

 

        this.dragControls.addEventListener('hoveron', function( event ){
          self.orbitControls.enabled = false
          self.changeMaterial(event.object)
          console.log(event.object)
          self.transformControls.attach(event.object);
          self.transformControls.setSize(0.4);
          });

 

 

createevent() {
      // 事件管理、操作控制器 ,旋轉控件
      this.orbitControls = new OrbitControls(
        this.camera,
        this.renderer.domElement
      );
        // this.controls = new TrackballControls(this.camera, this.renderer.domElement); // 軌跡球控件
        // // controls.noRotate = true;
        // this.controls.noPan = true;
        // // 視角最小距離
        // this.controls.minDistance = 1000;
        // // 視角最遠距離
        // this.controls.maxDistance = 5000;
      this.orbitControls.enableDamping = true;
      this.orbitControls.maxDistance = 1000;
      this.orbitControls.minDistance = 1;
      this.transformControls = new TransformControls(this.camera, this.renderer.domElement);
      this.scene.add(this.transformControls)
      var objects = [];
      for (let i = 0; i < this.scene.children.length; i++) {
            if (this.scene.children[i].isMesh) {
                objects.push(this.scene.children[i]);
            }
        }
      this.dragControls = new DragControls(objects, this.camera, this.renderer.domElement);
        var self = this
        this.dragControls.addEventListener('dragstart', function (event) { //
            // this.controls.enabled = false;
        });
        // 拖拽結束
       this. dragControls.addEventListener('dragend', function (event) {
            // this.controls.enabled = true;
        });
        this.dragControls.addEventListener('hoveron', function( event ){ //選中模型
          self.orbitControls.enabled = false // 關閉orbitControls 控制器
          self.changeMaterial(event.object)
          console.log(event.object)
 self.transformControls.attach(event.object); self.transformControls.setSize(0.4);
          });
        this.dragControls.addEventListener('hoveroff',function(event){ 離開模型
          self.modelnumber = event.object.position
          self.orbitControls.enabled = true //啟動orbitControls 控制器
 }) },