|
|
@@ -30,7 +30,8 @@ export default {
|
|
|
let comlist = list.filter(it=>it.spaceType!=14);//过滤花园的空间
|
|
|
this.loaderCommonSpace(this.gltfSpaceUrl,comlist,1);
|
|
|
let arrlist = list.filter(it=>it.spaceType==14);//花园的空间
|
|
|
- this.loaderCommonSpace(this.gltfSpace1Url,arrlist,2);
|
|
|
+ // this.loaderCommonSpace(this.gltfSpace1Url,arrlist,2);
|
|
|
+ this.loaderGraseSpace(list);//加载草地的模型-所有地块都添加，填补房间里面的
|
|
|
},
|
|
|
loaderCommonSpace(gltfSpaceUrl,list,type=1){
|
|
|
var that = this;
|
|
|
@@ -117,6 +118,55 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ //草地加载
|
|
|
+ loaderGraseSpace(list){
|
|
|
+ let glbWidth = 300;
|
|
|
+ let glbHeight = 300;
|
|
|
+ var that = this;
|
|
|
+ console.log("草地模型加载成功",list)
|
|
|
+ //将模型添加到场景中
|
|
|
+ // let texture = new THREE.TextureLoader().load( "https://dm.static.elab-plus.com/miniProgram/T_GLTF_MI_Uncut_Grass_oilpt20_2K_BaseColor.jpg");
|
|
|
+ // let texture = new THREE.TextureLoader().load( "https://dm.static.elab-plus.com/miniProgram/Avatar_male.png" );
|
|
|
+ // texture.wrapS = THREE.RepeatWrapping;
|
|
|
+ // texture.wrapT = THREE.RepeatWrapping;
|
|
|
+
|
|
|
+ list && list.forEach(obj=>{
|
|
|
+ let positionX = obj.centerX / 100;
|
|
|
+ let positionY = obj.centerY / 100;
|
|
|
+ let scaleX = obj.spaceWidth / 100;
|
|
|
+ let scaleY = obj.spaceHeight / 100;
|
|
|
+
|
|
|
+ let texture = new THREE.TextureLoader().load( "https://dm.static.elab-plus.com/miniProgram/grass.jpg");
|
|
|
+ texture.wrapS = THREE.RepeatWrapping;
|
|
|
+ texture.wrapT = THREE.RepeatWrapping;
|
|
|
+ //使用纹理贴图材质
|
|
|
+ texture.repeat.set(scaleX, scaleY);
|
|
|
+
|
|
|
+ let geometry = new THREE.PlaneGeometry(obj.spaceWidth/100, obj.spaceHeight/100);
|
|
|
+ let material = new THREE.MeshBasicMaterial({ map: texture });
|
|
|
+ let cube = new THREE.Mesh(geometry, material);
|
|
|
+
|
|
|
+ cube.name= "地板";
|
|
|
+ cube.userType = "mesh";
|
|
|
+ cube.userData = obj;//位置数据
|
|
|
+ // 设置位置，旋转，缩放
|
|
|
+ cube.position.set(positionX, -0.001, -positionY);
|
|
|
+ cube.rotation.x = -Math.PI / 2 ; // 旋转 180 度
|
|
|
+ cube.receiveShadow = true;//材质是否接收阴影
|
|
|
+
|
|
|
+ //注释掉，不让草地进入空间列表中，不触发空间变化的动画过程，规避掉动画过程中的问题
|
|
|
+ // let md = {
|
|
|
+ // spaceId:obj.spaceId,//模型实例的唯一标识
|
|
|
+ // spaceName:obj.spaceName,//几何体的id
|
|
|
+ // spaceType:obj.spaceType,
|
|
|
+ // position:cube.position,
|
|
|
+ // scale:cube.scale,
|
|
|
+ // isSizeLock:obj.isSizeLock,
|
|
|
+ // };
|
|
|
+ // that.gltfSpaces.push(md);
|
|
|
+ that.scene.add(cube);
|
|
|
+ })
|
|
|
+ },
|
|
|
//修改当前空间的面积大小
|
|
|
changeSpacesAnimOld(curSpace){
|
|
|
// 寻找地板
|
|
|
@@ -178,76 +228,100 @@ export default {
|
|
|
let toPz = curSpace.toPz;
|
|
|
let toScaleX = curSpace.toScaleX;
|
|
|
let toScaleZ = curSpace.toScaleZ;
|
|
|
-
|
|
|
- let spaceInitMatrix = [];//空间动画时的初始变换矩阵
|
|
|
- cube.instancedMeshIndexList.forEach(instanced=>{
|
|
|
- let _index = instanced.instancedMeshIndex;//geometry实例 在 全局InstancedMesh实例的位置
|
|
|
- let instancedMesh = this.instancedSpaceMeshList[_index];//获取具体的网格实例
|
|
|
- let startMatrix = new THREE.Matrix4();//定义一个四维矩阵
|
|
|
- instancedMesh.getMatrixAt(instanced.instancedAtIndex,startMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
|
|
|
- spaceInitMatrix.push({
|
|
|
- index:_index,
|
|
|
- matrix:startMatrix.clone(),
|
|
|
- color:instancedMesh.material.color.clone(),
|
|
|
- })
|
|
|
- });
|
|
|
- // console.warn("***cube***",cube.spaceId,Date.now(),JSON.stringify(spaceInitMatrix[0].matrix))
|
|
|
- var tween = new TWEEN.Tween({
|
|
|
- x: cube.position.x,
|
|
|
- z: cube.position.z,
|
|
|
- sx:cube.scale.x,
|
|
|
- sz:cube.scale.z
|
|
|
- })
|
|
|
- .to({
|
|
|
- x: curSpace.toPx,
|
|
|
- z: curSpace.toPz,
|
|
|
- sx:curSpace.toScaleX,
|
|
|
- sz:curSpace.toScaleZ
|
|
|
- }, 2000)
|
|
|
- .easing(TWEEN.Easing.Quadratic.InOut)
|
|
|
- .onUpdate((object)=> {
|
|
|
- //获取地板模型的geometry实例
|
|
|
+ if(cube.instancedMeshIndexList){
|
|
|
+ let spaceInitMatrix = [];//空间动画时的初始变换矩阵
|
|
|
cube.instancedMeshIndexList.forEach(instanced=>{
|
|
|
- let _index = instanced.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
|
|
|
+ let _index = instanced.instancedMeshIndex;//geometry实例 在 全局InstancedMesh实例的位置
|
|
|
let instancedMesh = this.instancedSpaceMeshList[_index];//获取具体的网格实例
|
|
|
- //获取对象实例的初始变换矩阵
|
|
|
- let tmp = spaceInitMatrix.find(it=>it.index==_index);
|
|
|
- let stratMatrix = tmp.matrix.clone(); //获取初始变换矩阵
|
|
|
- let scaleMatrix = new THREE.Matrix4(); //定义一个缩放变化矩阵
|
|
|
- let panMatrix = new THREE.Matrix4(); //定义一个平移变化矩阵
|
|
|
-
|
|
|
- scaleMatrix.makeScale(object.sx / scaleX,1,object.sz / scaleZ); //获得缩放变化矩阵
|
|
|
- panMatrix.makeTranslation(object.x - x,0,object.z - z); //获得平移变化矩阵
|
|
|
- stratMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵
|
|
|
- instancedMesh.instanceMatrix.needsUpdate = true;//更新之前，必须开启开关
|
|
|
- instancedMesh.setMatrixAt(instanced.instancedAtIndex,stratMatrix);//更新几何体的世界矩阵
|
|
|
- if(this.curSpaceObj.spaceId==cube.spaceId){//当前选中的空间才变化颜色
|
|
|
- instancedMesh.instanceColor.needsUpdate = true;//打开颜色修改开关,不开，颜色是不能修改额
|
|
|
- let color = new THREE.Color(0xFF9F40); // 使用sRGB颜色值
|
|
|
- // color.convertSRGBToLinear(); // 将颜色值转换为线性颜色值
|
|
|
- instancedMesh.setColorAt(instanced.instancedAtIndex, color);//修改这个几何体的颜色
|
|
|
- }
|
|
|
+ let startMatrix = new THREE.Matrix4();//定义一个四维矩阵
|
|
|
+ instancedMesh.getMatrixAt(instanced.instancedAtIndex,startMatrix);//获取当前几何体的四维矩阵到stratMatrix里面
|
|
|
+ spaceInitMatrix.push({
|
|
|
+ index:_index,
|
|
|
+ matrix:startMatrix.clone(),
|
|
|
+ color:instancedMesh.material.color.clone(),
|
|
|
+ })
|
|
|
});
|
|
|
- }).onComplete(()=>{//这个回调很可能会很慢
|
|
|
- this.tweenCameraAnmaChange(false);
|
|
|
- console.warn("***changeSpacesAnim-over***")
|
|
|
- if(this.curSpaceObj.spaceId==cube.spaceId){//当前选中的空间才恢复颜色
|
|
|
+ // console.warn("***cube***",cube.spaceId,Date.now(),JSON.stringify(spaceInitMatrix[0].matrix))
|
|
|
+ var tween = new TWEEN.Tween({
|
|
|
+ x: cube.position.x,
|
|
|
+ z: cube.position.z,
|
|
|
+ sx:cube.scale.x,
|
|
|
+ sz:cube.scale.z
|
|
|
+ })
|
|
|
+ .to({
|
|
|
+ x: curSpace.toPx,
|
|
|
+ z: curSpace.toPz,
|
|
|
+ sx:curSpace.toScaleX,
|
|
|
+ sz:curSpace.toScaleZ
|
|
|
+ }, 2000)
|
|
|
+ .easing(TWEEN.Easing.Quadratic.InOut)
|
|
|
+ .onUpdate((object)=> {
|
|
|
+ //获取地板模型的geometry实例
|
|
|
cube.instancedMeshIndexList.forEach(instanced=>{
|
|
|
- let _index = instanced.instancedMeshIndex;//第一个geometry实例 在 全局Instance
|
|
|
+ let _index = instanced.instancedMeshIndex;//第一个geometry实例 在 全局InstancedMesh实例的位置
|
|
|
let instancedMesh = this.instancedSpaceMeshList[_index];//获取具体的网格实例
|
|
|
+ //获取对象实例的初始变换矩阵
|
|
|
let tmp = spaceInitMatrix.find(it=>it.index==_index);
|
|
|
- instancedMesh.instanceColor.needsUpdate = true;//打开颜色修改开关,不开，颜色是不能修改额
|
|
|
- instancedMesh.setColorAt(instanced.instancedAtIndex, tmp.color);//修改这个几何体的颜色
|
|
|
+ let stratMatrix = tmp.matrix.clone(); //获取初始变换矩阵
|
|
|
+ let scaleMatrix = new THREE.Matrix4(); //定义一个缩放变化矩阵
|
|
|
+ let panMatrix = new THREE.Matrix4(); //定义一个平移变化矩阵
|
|
|
+
|
|
|
+ scaleMatrix.makeScale(object.sx / scaleX,1,object.sz / scaleZ); //获得缩放变化矩阵
|
|
|
+ panMatrix.makeTranslation(object.x - x,0,object.z - z); //获得平移变化矩阵
|
|
|
+ stratMatrix.multiply(scaleMatrix).premultiply(panMatrix);//通过矩阵计算获得最终的形变矩阵
|
|
|
+ instancedMesh.instanceMatrix.needsUpdate = true;//更新之前，必须开启开关
|
|
|
+ instancedMesh.setMatrixAt(instanced.instancedAtIndex,stratMatrix);//更新几何体的世界矩阵
|
|
|
+ if(this.curSpaceObj.spaceId==cube.spaceId){//当前选中的空间才变化颜色
|
|
|
+ instancedMesh.instanceColor.needsUpdate = true;//打开颜色修改开关,不开，颜色是不能修改额
|
|
|
+ let color = new THREE.Color(0xFF9F40); // 使用sRGB颜色值
|
|
|
+ // color.convertSRGBToLinear(); // 将颜色值转换为线性颜色值
|
|
|
+ instancedMesh.setColorAt(instanced.instancedAtIndex, color);//修改这个几何体的颜色
|
|
|
+ }
|
|
|
});
|
|
|
- }
|
|
|
- });
|
|
|
- // 开始动画
|
|
|
- tween.start();
|
|
|
- this.tweenCameraAnmaChange(true)
|
|
|
- cube.position.x = curSpace.toPx;
|
|
|
- cube.position.z = curSpace.toPz;
|
|
|
- cube.scale.x = curSpace.toScaleX;
|
|
|
- cube.scale.z = curSpace.toScaleZ;
|
|
|
+ }).onComplete(()=>{//这个回调很可能会很慢
|
|
|
+ this.tweenCameraAnmaChange(false);
|
|
|
+ console.warn("***changeSpacesAnim-over***")
|
|
|
+ if(this.curSpaceObj.spaceId==cube.spaceId){//当前选中的空间才恢复颜色
|
|
|
+ cube.instancedMeshIndexList.forEach(instanced=>{
|
|
|
+ let _index = instanced.instancedMeshIndex;//第一个geometry实例 在 全局Instance
|
|
|
+ let instancedMesh = this.instancedSpaceMeshList[_index];//获取具体的网格实例
|
|
|
+ let tmp = spaceInitMatrix.find(it=>it.index==_index);
|
|
|
+ instancedMesh.instanceColor.needsUpdate = true;//打开颜色修改开关,不开，颜色是不能修改额
|
|
|
+ instancedMesh.setColorAt(instanced.instancedAtIndex, tmp.color);//修改这个几何体的颜色
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 开始动画
|
|
|
+ tween.start();
|
|
|
+ this.tweenCameraAnmaChange(true)
|
|
|
+ cube.position.x = curSpace.toPx;
|
|
|
+ cube.position.z = curSpace.toPz;
|
|
|
+ cube.scale.x = curSpace.toScaleX;
|
|
|
+ cube.scale.z = curSpace.toScaleZ;
|
|
|
+ }else{//有点问题规避下
|
|
|
+ // 空间动画
|
|
|
+ var tween = new TWEEN.Tween({
|
|
|
+ x: scaleX,
|
|
|
+ z: scaleZ,
|
|
|
+ px:x,
|
|
|
+ pz:z,
|
|
|
+ })
|
|
|
+ .to({
|
|
|
+ x: toScaleX,
|
|
|
+ z: toScaleZ,
|
|
|
+ px:toPx,
|
|
|
+ pz:toPz,
|
|
|
+ }, 2000)
|
|
|
+ .easing(TWEEN.Easing.Quadratic.InOut)
|
|
|
+ .onUpdate((object)=> {
|
|
|
+ cube.scale.x = object.x;
|
|
|
+ cube.scale.z = object.z;
|
|
|
+ cube.position.x = object.px;
|
|
|
+ cube.position.z = object.pz;
|
|
|
+ });
|
|
|
+ // 开始动画
|
|
|
+ tween.start();
|
|
|
+ }
|
|
|
},
|
|
|
//所有空间整体缩放-同时同步到数据里面
|
|
|
allSpaceScale(){
|
zjs_project