fl-web-component 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint \"{src,packages}/**/*.{vue,js}\" --fix",

package/packages/components/com-graphics/index.vue

@@ -175,8 +175,9 @@
           modelGroup = handleInstancedMeshModel(instances, drawObjs, '', scene, color);
           scene.add(modelGroup);
           // this.compileShader();
-          cameraControls.fitToSphere(modelGroup, true);
-          cameraControls.saveState();
+          // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
+          this.setModelCenter(modelGroup);
+          // cameraControls.saveState();
         }
       },
       compileShader() {
@@ -229,7 +230,7 @@
             mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
             raycaster.setFromCamera(mouse, camera);
             const intersects = raycaster.intersectObjects(scene.children, true);
-            let params = {}
+            let params = {};
             let cameraData = {
               position: {
                 x: cameraControls.camera.position.x,
@@ -251,8 +252,8 @@
                   x: intersects[0].point.x,
                   y: intersects[0].point.y,
                   z: intersects[0].point.z,
-                }
-              }
+                },
+              };
             } else {
               params = {
                 objects: [],
@@ -262,8 +263,8 @@
                   x: -1,
                   y: -1,
                   z: -1,
-                }
-              }
+                },
+              };
             }
             if (event.button === 0) {
               this.$emit('leftClick', params);
@@ -287,26 +288,26 @@
           }
         }
       },
-      setModelCenter() {
-        // const box3 = new this.THREE.Box3();
-        // box3.setFromObject(modelGroup);
-        // const center = new this.THREE.Vector3();
-        // box3.getCenter(center);
-        // const size = box3.getSize(new this.THREE.Vector3());
-        // camera.position.set(center.x, center.y + size.y, center.z + size.z / 2);
-        // camera.lookAt(new this.THREE.Vector3(center.x, center.y, center.z));
-        // cameraControls.setLookAt(
-        //   center.x,
-        //   center.y + size.y,
-        //   center.z + size.z / 2,
-        //   center.x,
-        //   center.y,
-        //   center.z,
-        //   true
-        // );
-        // cameraControls.update();
-        // camera.updateProjectionMatrix();
-        // cameraControls.saveState();
+      setModelCenter(mesh) {
+        const box3 = new this.THREE.Box3();
+        box3.setFromObject(mesh);
+        const center = new this.THREE.Vector3();
+        box3.getCenter(center);
+        const size = box3.getSize(new this.THREE.Vector3());
+        camera.position.set(center.x, center.y + size.y, center.z + size.z / 2);
+        camera.lookAt(new this.THREE.Vector3(center.x, center.y, center.z));
+        cameraControls.setLookAt(
+          center.x,
+          center.y + size.y,
+          center.z + size.z / 2,
+          center.x,
+          center.y,
+          center.z,
+          true
+        );
+        cameraControls.update(0);
+        camera.updateProjectionMatrix();
+        cameraControls.saveState();
       },
       // 修改指定模型实体属性
       /**
@@ -415,7 +416,8 @@
       locateModel(id) {
         let obj = scene.getObjectByName(id);
         if (obj) {
-          cameraControls.fitToSphere(obj.parent, true);
+          // cameraControls.fitToSphere(obj.parent, true); // TODO 待处理，先用 setModelCenter 进行定位
+          this.setModelCenter(obj.parent);
           // cameraControls.fitToBox( obj, true);
         }
       },

package/src/main.js

@@ -1,11 +1,13 @@
 import FlModel from '../packages/components/com-graphics/index.vue';
 import Fl2dcanvas from '../packages/components/com-flcanvas/index.vue';
+import * as THREE from 'three';
 const components = [
     FlModel,
     Fl2dcanvas
 ];
 
 const install = (Vue) => {
+    Vue.prototype.THREE = THREE
     components.forEach(component => {
         Vue.component(component.name, component);
     });

package/src/utils/flgltf-parser.js

@@ -132,10 +132,12 @@ function parseData(input) {
   const formatInstances = [];
   flattenAndComputeWorldMatrices(rootInstances, formatInstances);
 
-  return {
+  const map = {
     drawObjs: Array.from(drawObjMap.values()),
     instances: formatInstances,
-  };
+  }
+  console.log('parseData', map)
+  return map;
 }
 
 export { parseData };

package/src/utils/instance-parser.js

@@ -31,7 +31,7 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor)
   for (let i = 0; i < instances.length; i++) {
     formatInstancedMap(instances[i], drawObjs);
   }
-
+  console.log('drawObjMapInstance', drawObjMapInstance)
   // 第二阶段：遍历所有实例进行处理
   for (let i = 0; i < instances.length; i++) {
     let targetGroup, instancedMeshIndex, drawObjectName;
@@ -93,6 +93,7 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor)
       modelGroup.add(group);
     }
   }
+  console.log('modelGroup', modelGroup)
   return modelGroup;
   // timeRender();
   // console.log('scene', scene)