Jelajahi Sumber

[Mod 0000]优化模型加载

hongrunxia 3 minggu lalu
induk
melakukan
94138f59bf
2 mengubah file dengan 88 tambahan dan 122 penghapusan
  1. 15 22
      src/hooks/vent/useThree.ts
  2. 73 100
      src/utils/threejs/useThree.ts

+ 15 - 22
src/hooks/vent/useThree.ts

@@ -248,32 +248,25 @@ class UseThree {
                 );
               } else {
                 // 开启线程下载
-                console.log('需要开启线程下载模型资源。。。。。');
-                const result = (await getList({ fileName: modalNameStr })) || [];
-                const file = result['records'][0];
-                if (file && file.path) {
-                  gltfLoader.load(`${baseApiUrl}/sys/common/static/${file.path}`, async (glft) => {
-                    if (glft) {
-                      const object = glft.scene;
-                      object.name = modalNameStr;
-                      if (glft.animations.length > 0) {
-                        object.animations = glft.animations;
-                      }
-                      group?.add(object);
-                      childResolve(object);
-                      const modalArr = await db.modal.where('modalName').equals(modalNameStr).toArray();
-                      if (modalArr.length < 1) {
-                        saveModel(modalNameStr, file.path, file.version);
-                      }
+                gltfLoader.load(`${baseApiUrl}/sys/common/static/webfile/${modalNameStr}.glb`, async (glft) => {
+                  if (glft) {
+                    const object = glft.scene;
+                    object.name = modalNameStr;
+                    if (glft.animations.length > 0) {
+                      object.animations = glft.animations;
                     }
-                  });
-                } else {
-                  childResolve(null);
-                }
+                    group?.add(object);
+                    childResolve(object);
+                    const modalArr = await db.modal.where('modalName').equals(modalNameStr).toArray();
+                    if (modalArr.length < 1) {
+                      saveModel(modalNameStr, `webfile/${modalNameStr}.glb`, 1);
+                    }
+                  }
+                });
               }
             } catch (error) {
               console.log(error);
-              reject();
+              childResolve(null);
             }
           });
         }

+ 73 - 100
src/utils/threejs/useThree.ts

@@ -274,6 +274,7 @@ class UseThree {
                   },
                   (err) => {
                     console.log(err);
+                    childResolve(null);
                   }
                 );
               } else {
@@ -282,112 +283,84 @@ class UseThree {
                 const result = (await getList({ fileName: modalNameStr })) || [];
                 const file = result['records'][0];
                 debugger;
-                if (file && file.path) {
-                  console.log('需要开启线程下载模型资源。。。。。');
-
-                  // 如果是常村时
-                  const token = getToken();
-                  fetch(`${baseApiUrl}/sys/common/static/${file.path}`, {
-                    method: 'GET',
-                    cache: 'no-cache',
-                    headers: {
-                      'Content-Type': 'application/force-download',
-                      // Authorization: token,
-                      // 'X-Access-Token': token,
-                      // token: token,
-                    },
-                  }).then(async (data) => {
-                    const arrayBuffer = await data.arrayBuffer();
-                    // 将资源存放到db
-                    const fileName = `${baseApiUrl}/sys/common/static/${file.path}`.replace(/(.*\/)*([^.]+).*/gi, '$2');
-                    const model = {
-                      modalName: fileName,
-                      modalVal: arrayBuffer,
-                      versionStr: fileName,
-                    };
-                    db.open();
-                    await db.modal.add(model);
-                    gltfLoader.parse(
-                      arrayBuffer,
-                      '/model/glft/',
-                      (gltf) => {
-                        let object: THREE.Object3D = gltf.scene;
-                        // setModalCenter(object);
-                        object.traverse((obj) => {
-                          if (obj instanceof THREE.Mesh) {
-                            obj.material.emissiveIntensity = 1;
-                            obj.material.emissiveMap = obj.material.map;
-                            obj.material.blending = THREE.CustomBlending;
-
-                            if (obj.material.opacity < 1) {
-                              obj.material.transparent = true;
-                            }
-                            if (obj.material.map) {
-                              obj.material.map.colorSpace = THREE.SRGBColorSpace;
-                              obj.material.map.flipY = false;
-                              obj.material.map.anisotropy = 1;
-                            }
-                            if (obj.material.emissiveMap) {
-                              obj.material.emissiveMap.colorSpace = THREE.SRGBColorSpace;
-                              obj.material.emissiveMap.flipY = false;
-                            }
-
-                            if (obj.material.map || obj.material.emissiveMap) {
-                              obj.material.needsUpdate = true;
-                            }
-
-                            // if (envMap) {
-                            //   obj.material.envMap = envMap;
-                            //   obj.material.envMapIntensity = 1;
-                            // }
-                            // obj.renderOrder = 1;
+                console.log('需要开启线程下载模型资源。。。。。');
+
+                // 如果是常村时
+                const token = getToken();
+                fetch(`${baseApiUrl}/sys/common/static/webfile/${modalNameStr}.glb`, {
+                  method: 'GET',
+                  cache: 'no-cache',
+                  headers: {
+                    'Content-Type': 'application/force-download',
+                    Authorization: token,
+                    'X-Access-Token': token,
+                    token: token,
+                  },
+                }).then(async (data) => {
+                  const arrayBuffer = await data.arrayBuffer();
+                  // 将资源存放到db
+                  const fileName = modalNameStr;
+                  const model = {
+                    modalName: fileName,
+                    modalVal: arrayBuffer,
+                    versionStr: fileName,
+                  };
+                  db.open();
+                  await db.modal.add(model);
+                  gltfLoader.parse(
+                    arrayBuffer,
+                    '/model/glft/',
+                    (gltf) => {
+                      let object: THREE.Object3D = gltf.scene;
+                      // setModalCenter(object);
+                      object.traverse((obj) => {
+                        if (obj instanceof THREE.Mesh) {
+                          obj.material.emissiveIntensity = 1;
+                          obj.material.emissiveMap = obj.material.map;
+                          obj.material.blending = THREE.CustomBlending;
+
+                          if (obj.material.opacity < 1) {
+                            obj.material.transparent = true;
+                          }
+                          if (obj.material.map) {
+                            obj.material.map.colorSpace = THREE.SRGBColorSpace;
+                            obj.material.map.flipY = false;
+                            obj.material.map.anisotropy = 1;
+                          }
+                          if (obj.material.emissiveMap) {
+                            obj.material.emissiveMap.colorSpace = THREE.SRGBColorSpace;
+                            obj.material.emissiveMap.flipY = false;
+                          }
+
+                          if (obj.material.map || obj.material.emissiveMap) {
+                            obj.material.needsUpdate = true;
                           }
-                        });
-                        if (isBlender) {
-                          object = object.children[0];
+
+                          // if (envMap) {
+                          //   obj.material.envMap = envMap;
+                          //   obj.material.envMapIntensity = 1;
+                          // }
+                          // obj.renderOrder = 1;
                         }
-                        object.animations = gltf.animations;
-                        object.name = modalNameStr;
-                        if (group) group.add(object);
-                        childResolve(object);
-                      },
-                      (err) => {
-                        console.log(err);
+                      });
+                      if (isBlender) {
+                        object = object.children[0];
                       }
-                    );
-                  });
-
-                  // gltfLoader.load(
-                  //   `${baseApiUrl}/sys/common/static/${file.path}`,
-                  //   async (glft) => {
-                  //     if (glft) {
-                  //       let object: THREE.Object3D = glft.scene;
-                  //       if (isBlender) {
-                  //         object = object.children[0];
-                  //       }
-                  //       object.name = modalNameStr;
-                  //       if (glft.animations.length > 0) {
-                  //         object.animations = glft.animations;
-                  //       }
-                  //       if (group) group.add(object);
-                  //       childResolve(object);
-                  //       const modalArr = await db.modal.where('modalName').equals(modalNameStr).toArray();
-                  //       if (modalArr.length < 1) {
-                  //         saveModel(modalNameStr, file.path, file.version);
-                  //       }
-                  //     }
-                  //   },
-                  //   (err) => {
-                  //     console.log(err);
-                  //   }
-                  // );
-                } else {
-                  childResolve(null);
-                }
+                      object.animations = gltf.animations;
+                      object.name = modalNameStr;
+                      if (group) group.add(object);
+                      childResolve(object);
+                    },
+                    (err) => {
+                      console.log(err);
+                      childResolve(null);
+                    }
+                  );
+                });
               }
             } catch (error) {
               console.log(error);
-              reject();
+              childResolve(null);
             }
           });
         }