增加模型

gltf/gltf.json

@@ -17,4 +17,8 @@
 ,{"name":"结晶器", "value":"结晶器.gltf", "scaleX":0.01, "scaleY":0.01, "scaleZ":0.01, "posY":0}
 ,{"name":"25过滤机", "value":"25过滤机.gltf", "scaleX":0.01, "scaleY":0.01, "scaleZ":0.01, "posY":0}
 ,{"name":"72过滤机", "value":"720.glb", "scaleX":0.01, "scaleY":0.01, "scaleZ":0.01, "posY":0}
+,{"name":"凉水塔", "value":"凉水塔.gltf", "scaleX":0.01, "scaleY":0.01, "scaleZ":0.01, "posY":0}
+,{"name":"冰机", "value":"冰机.gltf", "scaleX":0.01, "scaleY":0.01, "scaleZ":0.01, "posY":0}
+,{"name":"钾离心机", "value":"钾离心机.gltf", "scaleX":0.01, "scaleY":0.01, "scaleZ":0.01, "posY":0}
+,{"name":"芒硝离心机", "value":"芒硝离心机.gltf", "scaleX":0.01, "scaleY":0.01, "scaleZ":0.01, "posY":0}
 ]

src/layout/index.vue

@@ -58,6 +58,7 @@
   import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
   import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
   import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+  import { DragControls } from 'three/examples/jsm/controls/DragControls.js';
   import { ElLoading } from 'element-plus'
   
   const dom = ref<HTMLDivElement>()
@@ -76,6 +77,7 @@
   var baseScaleX = 1;
   var baseScaleY = 1;
   var baseScaleZ = 1;
+  var dragControls:any;
 
   const isShowView=(val:boolean)=>{
     pathname = window.location.pathname;
@@ -162,6 +164,7 @@
     var box = new THREE.Box3().setFromObject(cube);
     var y = box.max.y - box.min.y
     cube.position.set(0, y/2, 0);
+    dragModel(cube);
     scene.add( cube );
   }
 
@@ -182,6 +185,7 @@
         originaMesh.position.set(0,y/2,0);
       }
       originaMesh.name = "file_"+modelName+"_"+new Date().getTime();
+      dragModel(originaMesh);
       scene.add(originaMesh)
     })
   }
@@ -195,10 +199,27 @@
       originaMesh.position.set(params.x,params.y,params.z);
       originaMesh.rotation.set(params.rx, params.ry, params.rz)
       originaMesh.name = params.name;
+      dragModel(originaMesh);
       scene.add(originaMesh)
     })
   }
 
+  function dragModel(model:any){
+    const draggableObjects = [model];
+    dragControls = new DragControls(draggableObjects, camera, renderer.domElement);
+    dragControls.transformGroup = true;
+    dragControls.addEventListener("dragstart", ()=>{
+      control.enabled = false;
+    })
+    dragControls.addEventListener("dragend", ()=>{
+      control.enabled = true;
+      settings.x = model.position.x;
+      settings.y = model.position.y;
+      settings.z = model.position.z;
+    })
+  }
+
+
   // 创建场景
   const initScene = () => {
     return new THREE.Scene()
@@ -432,7 +453,7 @@
   ObjectSelect(scene, camera, outlinePass, clickHandle)
   
   const updateModel =() =>{
-    if(settings.selMesh){
+    if(settings.selMesh&&control.enabled){
       updateLoadModel(settings.selMesh, settings);
     }
   }