CLX

src/modules/clx/Clx3dObject.ts

@@ -390,9 +390,7 @@ export default class Clx3dObject extends THREE.Object3D {
       bevelEnabled: true,
       extrudePath: curve //  设置挤出轨迹
     }
-    const geometry = new THREE.ExtrudeGeometry(shape, options)
+    return new THREE.ExtrudeGeometry(shape, options)
-
-    return geometry
   }
 
   private static clxPedestalGeometry: THREE.BufferGeometry = null
@@ -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<void> {
@@ -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