|
|
@@ -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 () {
|
wuhb