|
|
@@ -13,9 +13,7 @@ import Stats from 'three/examples/jsm/libs/stats.module.js';
|
|
|
import { useModelStore } from '/@/store/modules/threejs';
|
|
|
import TWEEN from 'three/examples/jsm/libs/tween.module.js';
|
|
|
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
|
|
|
-import { getList } from '@/views/vent/sys/resources/file.api';
|
|
|
-import { saveModel } from '/@/utils/threejs/util';
|
|
|
-import { getToken, getTenantId } from '/@/utils/auth';
|
|
|
+import { getToken } from '/@/utils/auth';
|
|
|
|
|
|
import { useGlobSetting } from '/@/hooks/setting';
|
|
|
import { get } from 'sortablejs';
|
|
|
@@ -220,68 +218,55 @@ class UseThree {
|
|
|
const modalNameStr = modalNameArr[i];
|
|
|
let modalValue;
|
|
|
const modalArr = await db.modal.where('modalName').equals(modalNameStr).toArray();
|
|
|
- if (modalArr.length > 0 && modalArr[0].modalVal.byteLength > 0) {
|
|
|
+ if (modalArr.length > 0 && modalArr[0].modalVal?.byteLength > 0) {
|
|
|
modalValue = modalArr[0].modalVal;
|
|
|
} else if (modalArr.length > 0) {
|
|
|
- db.modal.delete(modalArr[0].id);
|
|
|
+ // 主键是 modalName,不是自增 id
|
|
|
+ await db.modal.delete(modalNameStr);
|
|
|
}
|
|
|
- if (modalValue) {
|
|
|
- gltfLoader.parse(
|
|
|
- modalValue,
|
|
|
- '/model/glft/',
|
|
|
- (gltf) => {
|
|
|
- let object: THREE.Object3D = gltf.scene;
|
|
|
- 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;
|
|
|
- }
|
|
|
- });
|
|
|
- if (isBlender) {
|
|
|
- object = object.children[0];
|
|
|
+
|
|
|
+ const finishObject = (gltf) => {
|
|
|
+ let object: THREE.Object3D = gltf.scene;
|
|
|
+ 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;
|
|
|
}
|
|
|
- object.animations = gltf.animations;
|
|
|
- object.name = modalNameStr;
|
|
|
- if (group) group.add(object);
|
|
|
- childResolve(object);
|
|
|
- },
|
|
|
- (err) => {
|
|
|
- console.log(err);
|
|
|
- childResolve(null);
|
|
|
}
|
|
|
- );
|
|
|
- } else {
|
|
|
- // 开启线程下载
|
|
|
+ });
|
|
|
+ if (isBlender) {
|
|
|
+ object = object.children[0];
|
|
|
+ }
|
|
|
+ object.animations = gltf.animations;
|
|
|
+ object.name = modalNameStr;
|
|
|
+ if (group) group.add(object);
|
|
|
+ childResolve(object);
|
|
|
+ };
|
|
|
|
|
|
- const result = (await getList({ fileName: modalNameStr })) || [];
|
|
|
- const file = result['records'][0];
|
|
|
+ if (modalValue) {
|
|
|
+ gltfLoader.parse(modalValue, '/model/glft/', finishObject, (err) => {
|
|
|
+ console.log(err);
|
|
|
+ childResolve(null);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
console.log('需要开启线程下载模型资源。。。。。');
|
|
|
-
|
|
|
- // 如果是常村时
|
|
|
const token = getToken();
|
|
|
fetch(`${baseApiUrl}/sys/common/static/webfile/${modalNameStr}.glb`, {
|
|
|
method: 'GET',
|
|
|
@@ -292,67 +277,38 @@ class UseThree {
|
|
|
'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 (envMap) {
|
|
|
- // obj.material.envMap = envMap;
|
|
|
- // obj.material.envMapIntensity = 1;
|
|
|
- // }
|
|
|
- // obj.renderOrder = 1;
|
|
|
- }
|
|
|
- });
|
|
|
- if (isBlender) {
|
|
|
- object = object.children[0];
|
|
|
- }
|
|
|
- object.animations = gltf.animations;
|
|
|
- object.name = modalNameStr;
|
|
|
- if (group) group.add(object);
|
|
|
- childResolve(object);
|
|
|
- },
|
|
|
- (err) => {
|
|
|
- console.log(err);
|
|
|
+ })
|
|
|
+ .then(async (data) => {
|
|
|
+ if (!data.ok) {
|
|
|
+ console.warn(`[setGLTFModel] 模型下载失败: ${modalNameStr}.glb`, data.status);
|
|
|
childResolve(null);
|
|
|
+ return;
|
|
|
}
|
|
|
- );
|
|
|
- });
|
|
|
+ const arrayBuffer = await data.arrayBuffer();
|
|
|
+ if (!arrayBuffer || arrayBuffer.byteLength < 1) {
|
|
|
+ childResolve(null);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const model = {
|
|
|
+ modalName: modalNameStr,
|
|
|
+ modalVal: arrayBuffer,
|
|
|
+ versionStr: modalNameStr,
|
|
|
+ };
|
|
|
+ try {
|
|
|
+ // put 可覆盖同名主键,避免 ConstraintError: Key already exists
|
|
|
+ await db.modal.put(model);
|
|
|
+ } catch (dbError) {
|
|
|
+ console.warn(`[setGLTFModel] 缓存模型失败: ${modalNameStr}`, dbError);
|
|
|
+ }
|
|
|
+ gltfLoader.parse(arrayBuffer, '/model/glft/', finishObject, (err) => {
|
|
|
+ console.log(err);
|
|
|
+ childResolve(null);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch((error) => {
|
|
|
+ console.warn(`[setGLTFModel] 模型请求异常: ${modalNameStr}`, error);
|
|
|
+ childResolve(null);
|
|
|
+ });
|
|
|
}
|
|
|
} catch (error) {
|
|
|
console.log(error);
|