特征保存

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@element-plus/icons-vue": "^2.3.1",
+        "@michaelray/indexdb": "^0.0.3",
         "@types/dat.gui": "^0.7.7",
         "@types/three": "^0.146.0",
         "dat.gui": "^0.7.9",
@@ -111,6 +112,11 @@
       "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
+    "node_modules/@michaelray/indexdb": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmmirror.com/@michaelray/indexdb/-/indexdb-0.0.3.tgz",
+      "integrity": "sha512-/ZVr3GquXNogIyT4ZFLy5q5XvSy8fskL0l8EVIO+6pzoIrzZLEg8vk22kxwgPN7uj/O4IIz6YE8DZWq5LUKvSw=="
+    },
     "node_modules/@popperjs/core": {
       "name": "@sxzz/popperjs-es",
       "version": "2.11.7",
@@ -2224,6 +2230,11 @@
       "resolved": "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.8.tgz",
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig=="
     },
+    "@michaelray/indexdb": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmmirror.com/@michaelray/indexdb/-/indexdb-0.0.3.tgz",
+      "integrity": "sha512-/ZVr3GquXNogIyT4ZFLy5q5XvSy8fskL0l8EVIO+6pzoIrzZLEg8vk22kxwgPN7uj/O4IIz6YE8DZWq5LUKvSw=="
+    },
     "@popperjs/core": {
       "version": "npm:@sxzz/popperjs-es@2.11.7",
       "resolved": "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.1",
+    "@michaelray/indexdb": "^0.0.3",
     "@types/dat.gui": "^0.7.7",
     "@types/three": "^0.146.0",
     "dat.gui": "^0.7.9",

src/layout/index.vue

@@ -55,7 +55,6 @@
   import { fullscreenToggel } from '@/utils/screen'
   import { getWallData } from '@/stores/data'
   import gltfJson from '../../gltf/gltf.json'
-  // import sceneFile from '../../gltf/scene.json'
   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';
@@ -113,7 +112,7 @@
     console.log(val);
   }
 
-  function addGeometry(val:string){
+  function initGeometry(val:string){
     var geometry;
     if(val == 'BoxGeometry'){
       geometry = new THREE.BoxGeometry( 100, 100, 100 );
@@ -153,9 +152,14 @@
     }
     const material = new THREE.MeshPhysicalMaterial({color: 0xcccccc,metalness: 0.5,roughness: 0.5,reflectivity: 0.1});
     const cube = new THREE.Mesh( geometry, material );
+    cube.name = "default_"+ val +"_"+new Date().getTime();
+    return cube;
+  }
+
+  function addGeometry(val:string){
+    var cube = initGeometry(val);
     var box = new THREE.Box3().setFromObject(cube);
     var y = box.max.y - box.min.y
-    cube.name = "default_"+ new Date().getTime();
     cube.position.set(0, y/2, 0);
     scene.add( cube );
   }
@@ -176,6 +180,20 @@
       }else{
         originaMesh.position.set(0,y/2,0);
       }
+      originaMesh.name = "file_"+modelName+"_"+new Date().getTime();
+      scene.add(originaMesh)
+    })
+  }
+
+   // 导入glb模型
+  function loadGLBParam(modelName:string, params:any) {
+    const loader = new GLTFLoader()
+    loader.setPath('gltf/').load(modelName, function (mod) {
+      let originaMesh = mod.scene.children[0]
+      originaMesh.scale.set(params.sx, params.sy, params.sz)
+      originaMesh.position.set(params.x,params.y,params.z);
+      originaMesh.rotation.set(params.rx, params.ry, params.rz)
+      originaMesh.name = params.name;
       scene.add(originaMesh)
     })
   }
@@ -414,23 +432,33 @@
   
   const updateModel =() =>{
     if(settings.selMesh){
-      settings.selMesh.position.set(settings.x, settings.y, settings.z)
-      if(settings.color && settings.selMesh.material){
-        settings.selMesh.material.color.set(settings.color);
-      }
-      // if(settings.selMesh.type == 'Group'){
-      //   setGroupColor(settings.selMesh, settings.color);
-      // }
-      settings.selMesh.rotation.x = degreesArc(settings.rx);
-      settings.selMesh.rotation.y = degreesArc(settings.ry);
-      settings.selMesh.rotation.z = degreesArc(settings.rz);
-
-      settings.selMesh.scale.x = settings.sx;
-      settings.selMesh.scale.y = settings.sy;
-      settings.selMesh.scale.z = settings.sz;
+      updateLoadModel(settings.selMesh, settings);
     }
   }
   
+  const updateLoadModel =(model:any, param:any) =>{
+    if(param.x==undefined)param.x = 0;
+    if(param.y==undefined)param.y = 0;
+    if(param.z==undefined)param.z = 0;
+    model.position.set(param.x, param.y, param.z)
+    if(param.color && model.material){
+      model.material.color.set(param.color);
+    }
+    // if(settings.selMesh.type == 'Group'){
+    //   setGroupColor(settings.selMesh, settings.color);
+    // }
+    if(param.rx==undefined)param.rx = 0;
+    if(param.ry==undefined)param.ry = 0;
+    if(param.rz==undefined)param.rz = 0;
+    model.rotation.x = degreesArc(param.rx);
+    model.rotation.y = degreesArc(param.ry);
+    model.rotation.z = degreesArc(param.rz);
+    if(param.sx==undefined)param.sx = 1;
+    if(param.sy==undefined)param.sy = 1;
+    if(param.sz==undefined)param.sz = 1;
+    model.scale.set(param.sx, param.sy, param.sz);
+  }
+
   // 渲染函数
   const clock = new THREE.Clock()
   const render = () => {
@@ -442,8 +470,32 @@
   }
   
   const saveScene = () => {
-    var sceneStr = JSON.stringify(scene.toJSON())
-    localStorage.setItem('scene', sceneStr);
+    var childrens = scene.children;
+    var models = [];
+    for(var child in childrens){
+      var modelParam = {name: "", color: '' , x: 0, y: 0, z:0, rx:0, ry:0, rz:0, sx:1, sy:1, sz:1}
+      var model = childrens[child]
+      modelParam.name = model.name;
+      if(model.material){
+        modelParam.color = model.color;
+      }
+      if(modelParam.name.startsWith("default_")
+        ||modelParam.name.startsWith("file_")){
+        modelParam.x = model.position.x;
+        modelParam.y = model.position.y;
+        modelParam.z = model.position.z;
+        modelParam.sx = model.scale.x;
+        modelParam.sy = model.scale.y;
+        modelParam.sz = model.scale.z;
+        const matrix = new THREE.Matrix4().extractRotation(model.matrix);
+        const euler = new THREE.Euler().setFromRotationMatrix(matrix);
+        modelParam.rx = arcDegrees(euler.x);
+        modelParam.ry = arcDegrees(euler.y);
+        modelParam.rz = arcDegrees(euler.z);
+        models.push(modelParam);
+      }
+    }
+    localStorage.setItem('scene', JSON.stringify(models));
     alert("保存成功")
   };
   
@@ -457,29 +509,30 @@
     // 触发下载
     downloadLink.click();
   }
+  
 
   const loadScene = () => {
     var sceneJson = localStorage.getItem('scene');
     if (sceneJson) {
       //  // 将 sceneJson 字符串转换为 json 对象
         let loadedScene = JSON.parse(sceneJson);
-        let loader = new THREE.ObjectLoader();
-        let saveScene = loader.parse(loadedScene);
-        scene.clear();
-        scene.children = saveScene.children;
+        for(var child in loadedScene){
+          var modelParam = loadedScene[child];
+          if(modelParam.name.startsWith("default_")){
+            var params = modelParam.name.split("_");
+            var cube = initGeometry(params[1]);
+            updateLoadModel(cube, modelParam);
+            scene.add(cube)
+          }
+          if(modelParam.name.startsWith("file_")){
+            var params = modelParam.name.split("_");
+            loadGLBParam(params[1], modelParam);
+          }
+        }
         const axes = initAxesHelper(1000)
         scene.add(axes)
         return;
     }
-    // if(sceneFile){
-    //   let loadedScene = JSON.parse(sceneFile.toString());
-    //   let loader = new THREE.ObjectLoader();
-    //   let saveScene = loader.parse(loadedScene);
-    //   scene.clear();
-    //   scene.children = saveScene.children;
-    //   const axes = initAxesHelper(1000)
-    //   scene.add(axes)
-    // }
   };
   
   const clearScene = function () {

src/stores/init.ts

@@ -0,0 +1,25 @@
+import { init } from "@michaelray/indexdb";
+
+export const initDb = async () => {
+	await init({
+		dbName: "books",        // 数据库名称
+		version: 2,             // 版本号
+		tables: [
+			{
+				tableName: "bookRackList",         // 表名
+				option: {keyPath: "id", autoIncrement: true}, // 指明主键为id
+				indexs: [    // 数据库索引
+					{
+						key: "id",
+						option: {
+							unique: true
+						}
+					},
+					{
+						key: "name"
+					}
+				]
+			}
+		]
+	})
+}