diff --git a/src/modules/clx/Clx3dObject.ts b/src/modules/clx/Clx3dObject.ts index 749a888..a5f6c55 100644 --- a/src/modules/clx/Clx3dObject.ts +++ b/src/modules/clx/Clx3dObject.ts @@ -1,8 +1,8 @@ import * as THREE from 'three' -import { CSG } from 'three-csg-ts' +import {CSG} from 'three-csg-ts' import gsap from 'gsap' //@ts-ignore -import { mergeGeometries } from 'three/addons/utils/BufferGeometryUtils.js' +import {mergeGeometries} from 'three/addons/utils/BufferGeometryUtils.js' export default class Clx3dObject extends THREE.Object3D { @@ -52,7 +52,7 @@ export default class Clx3dObject extends THREE.Object3D { } // 创建挤出几何体 const geometry = new THREE.ExtrudeGeometry(shape, options) - const material = new THREE.MeshBasicMaterial({ color: 0xffdddbca }) + const material = new THREE.MeshBasicMaterial({color: 0xffdddbca}) const mesh = new THREE.Mesh(geometry, material) mesh.updateMatrix() @@ -209,7 +209,7 @@ export default class Clx3dObject extends THREE.Object3D { } // 创建挤出几何体 const geometry = new THREE.ExtrudeGeometry(shape, options) - const material = new THREE.MeshBasicMaterial({ color: 0xffdddbca }) + const material = new THREE.MeshBasicMaterial({color: 0xffdddbca}) const mesh = new THREE.Mesh(geometry, material) mesh.updateMatrix() @@ -390,9 +390,7 @@ export default class Clx3dObject extends THREE.Object3D { bevelEnabled: true, extrudePath: curve // 设置挤出轨迹 } - const geometry = new THREE.ExtrudeGeometry(shape, options) - - return geometry + return new THREE.ExtrudeGeometry(shape, options) } private static clxPedestalGeometry: THREE.BufferGeometry = null @@ -409,21 +407,21 @@ export default class Clx3dObject extends THREE.Object3D { Clx3dObject.clxPedestalGeometry = Clx3dObject.createClxPedestal() } const clxPedestalGeometry = Clx3dObject.clxPedestalGeometry - const clxPedestalMaterial = new THREE.MeshPhongMaterial({ color: 0xffdddbca }) + const clxPedestalMaterial = new THREE.MeshPhongMaterial({color: 0xffdddbca}) const clxPedestalMesh = new THREE.Mesh(clxPedestalGeometry, clxPedestalMaterial) if (!Clx3dObject.clxPillarGeometry) { Clx3dObject.clxPillarGeometry = Clx3dObject.createClxPillar() } const clxPillarGeometry = Clx3dObject.clxPillarGeometry - const clxPillarMaterial = new THREE.MeshPhongMaterial({ color: 0xff6c6956 }) + const clxPillarMaterial = new THREE.MeshPhongMaterial({color: 0xff6c6956}) const clxPillarMesh = new THREE.Mesh(clxPillarGeometry, clxPillarMaterial) if (!Clx3dObject.clxForkGeometry) { Clx3dObject.clxForkGeometry = Clx3dObject.createClxFork() } const clxForkGeometry = Clx3dObject.clxForkGeometry - const clxForkMaterial = new THREE.MeshPhongMaterial({ color: 0xff444444 }) + const clxForkMaterial = new THREE.MeshPhongMaterial({color: 0xff444444}) const clxForkMesh = new THREE.Mesh(clxForkGeometry, clxForkMaterial) clxForkMesh.name = 'clxFork' @@ -437,7 +435,7 @@ export default class Clx3dObject extends THREE.Object3D { } const clxGemelGeometryR = Clx3dObject.clxGemelGeometryR - const clxGemelMaterial = new THREE.MeshPhongMaterial({ color: 0xff555555 }) + const clxGemelMaterial = new THREE.MeshPhongMaterial({color: 0xff555555}) const clxGemelMeshL1 = new THREE.Mesh(clxGemelGeometryL, clxGemelMaterial) clxGemelMeshL1.name = 'clxGemelMeshL1' const clxGemelMeshL2 = new THREE.Mesh(clxGemelGeometryL, clxGemelMaterial) @@ -447,6 +445,13 @@ export default class Clx3dObject extends THREE.Object3D { const clxGemelMeshR2 = new THREE.Mesh(clxGemelGeometryR, clxGemelMaterial) clxGemelMeshR2.name = 'clxGemelMeshR2' + if (!Clx3dObject.clxForkBasePlateGeometry) { + Clx3dObject.clxForkBasePlateGeometry = Clx3dObject.createClxForkBasePlate() + } + const clxForkBasePlateGeometry = Clx3dObject.clxForkBasePlateGeometry + const clxForkBasePlateMesh = new THREE.Mesh(clxForkBasePlateGeometry, clxGemelMaterial) + clxForkBasePlateMesh.name = 'clxForkBasePlateMesh' + const d = 0 this.add(clxPedestalMesh) @@ -477,6 +482,7 @@ export default class Clx3dObject extends THREE.Object3D { this.add(clxGemelMeshL2) this.add(clxGemelMeshR1) this.add(clxGemelMeshR2) + this.add(clxForkBasePlateMesh) } animationShowFork(z: number): Promise { @@ -485,9 +491,12 @@ export default class Clx3dObject extends THREE.Object3D { const clxGemelMeshL2 = this.getObjectByName('clxGemelMeshL2') const clxGemelMeshR1 = this.getObjectByName('clxGemelMeshR1') const clxGemelMeshR2 = this.getObjectByName('clxGemelMeshR2') + const clxForkBasePlateMesh = this.getObjectByName('clxForkBasePlateMesh') const fy = clxFork.position.y + const time = 3 + const ac = Math.asin(z / (2 * 0.8)) // clxGemelMeshL1.position.z = 0.5 - z/4 @@ -496,13 +505,13 @@ export default class Clx3dObject extends THREE.Object3D { gsap.to(clxGemelMeshL1.position, { z: 0.5 - z / 4, y: fy + 0.72, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) gsap.to(clxGemelMeshL1.rotation, { x: -ac, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) @@ -512,13 +521,13 @@ export default class Clx3dObject extends THREE.Object3D { gsap.to(clxGemelMeshL2.position, { z: 0.5 - z / 4 * 3, y: fy + 0.72, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) gsap.to(clxGemelMeshL2.rotation, { x: -ac, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) @@ -529,13 +538,13 @@ export default class Clx3dObject extends THREE.Object3D { gsap.to(clxGemelMeshR1.position, { z: 0.5 - z / 4, y: fy + 0.72, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) gsap.to(clxGemelMeshR1.rotation, { x: ac, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) @@ -546,13 +555,20 @@ export default class Clx3dObject extends THREE.Object3D { gsap.to(clxGemelMeshR2.position, { z: 0.5 - z / 4 * 3, y: fy + 0.72, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) gsap.to(clxGemelMeshR2.rotation, { x: ac, - duration: 3, + duration: time, + repeat: 0, + ease: 'sine.inOut' + }) + + gsap.to(clxForkBasePlateMesh.position, { + y: fy, + duration: time, repeat: 0, ease: 'sine.inOut' }) @@ -560,7 +576,7 @@ export default class Clx3dObject extends THREE.Object3D { return new Promise(resolve => { gsap.to(clxFork.position, { z: -z, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut', onComplete: resolve @@ -579,28 +595,37 @@ export default class Clx3dObject extends THREE.Object3D { const clxGemelMeshL2 = this.getObjectByName('clxGemelMeshL2') const clxGemelMeshR1 = this.getObjectByName('clxGemelMeshR1') const clxGemelMeshR2 = this.getObjectByName('clxGemelMeshR2') + const clxForkBasePlateMesh = this.getObjectByName('clxForkBasePlateMesh') + + const time = 3 gsap.to(clxGemelMeshL1.position, { y: y + 0.72, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) gsap.to(clxGemelMeshL2.position, { y: y + 0.72, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) gsap.to(clxGemelMeshR1.position, { y: y + 0.72, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut' }) gsap.to(clxGemelMeshR2.position, { y: y + 0.72, - duration: 3, + duration: time, + repeat: 0, + ease: 'sine.inOut' + }) + gsap.to(clxForkBasePlateMesh.position, { + y: y, + duration: time, repeat: 0, ease: 'sine.inOut' }) @@ -608,7 +633,7 @@ export default class Clx3dObject extends THREE.Object3D { return new Promise(resolve => { gsap.to(clxFork.position, { y: y, - duration: 3, + duration: time, repeat: 0, ease: 'sine.inOut', onComplete: resolve