Browse Source

CLX 动画

master
yuliang 6 months ago
parent
commit
4d331ecfee
  1. 56
      src/core/manager/TaskManager.ts
  2. 134
      src/modules/clx/Clx3dObject.ts

56
src/core/manager/TaskManager.ts

@ -1,6 +1,7 @@
import * as THREE from 'three'
import gsap from 'gsap'
import Viewport from '@/core/engine/Viewport'
import Clx3dObject from "@/modules/clx/Clx3dObject";
export default class TaskManager implements TaskManagerIF {
@ -79,6 +80,30 @@ export default class TaskManager implements TaskManagerIF {
type: "TASKTYPE_CL2_DOW_ARM"
})
}
addClxShowArm(): void {
this.taskSequence.push({
type: "TASKTYPE_CLX_SHOW_ARM"
})
}
addClxUpArm(hight: number): void {
this.taskSequence.push({
type: "TASKTYPE_CLX_UP_ARM",
hight: hight
})
}
addClxHideArm(): void {
this.taskSequence.push({
type: "TASKTYPE_CLX_HIDE_ARM"
})
}
addClxDownArm(): void {
this.taskSequence.push({
type: "TASKTYPE_CLX_DOW_ARM"
})
}
public runTask() {
if (this.isStepRunning) {
@ -142,7 +167,6 @@ export default class TaskManager implements TaskManagerIF {
})
break
}
case 'TASKTYPE_CL2_UP_ARM': {
const agv = this.obj as THREE.Group
const agvPillar = agv.children[1] as THREE.Object3D
@ -187,6 +211,36 @@ export default class TaskManager implements TaskManagerIF {
})
break
}
case 'TASKTYPE_CLX_SHOW_ARM': {
const agv = this.obj as Clx3dObject
agv.animationShowFork(1.3).eventCallback('onComplete', () => {
this.runTask()
})
break
}
case 'TASKTYPE_CLX_UP_ARM': {
const agv = this.obj as Clx3dObject
const task = this.currentTask
agv.animationUpFork(task.hight).eventCallback('onComplete', () => {
this.runTask()
})
break
}
case 'TASKTYPE_CLX_HIDE_ARM': {
const agv = this.obj as Clx3dObject
agv.animationHideFork().eventCallback('onComplete', () => {
this.runTask()
})
break
}
case 'TASKTYPE_CLX_DOW_ARM': {
const agv = this.obj as Clx3dObject
agv.animationDownFork().eventCallback('onComplete', () => {
this.runTask()
})
break
}
default:
throw new Error('Invalid task type')

134
src/modules/clx/Clx3dObject.ts

@ -1,5 +1,6 @@
import * as THREE from "three";
import {CSG} from "three-csg-ts";
import gsap from 'gsap'
//@ts-ignore
import {mergeGeometries} from 'three/addons/utils/BufferGeometryUtils.js'
@ -444,4 +445,137 @@ export default class Clx3dObject extends THREE.Object3D {
this.add(clxGemelMeshR2)
}
animationShowFork(z: number): gsap.core.Tween {
const clxFork = this.getObjectByName('clxFork')
const clxGemelMeshL1 = this.getObjectByName('clxGemelMeshL1')
const clxGemelMeshL2 = this.getObjectByName('clxGemelMeshL2')
const clxGemelMeshR1 = this.getObjectByName('clxGemelMeshR1')
const clxGemelMeshR2 = this.getObjectByName('clxGemelMeshR2')
const fy = clxFork.position.y
const ac = Math.asin(z/(2 * 0.8))
// clxGemelMeshL1.position.z = 0.5 - z/4
// clxGemelMeshL1.position.y = fy + 0.72
// clxGemelMeshL1.rotation.x = -ac
gsap.to(clxGemelMeshL1.position, {
z: 0.5 - z/4,
y: fy + 0.72,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshL1.rotation, {
x: -ac,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
// clxGemelMeshL2.position.z = 0.5 - z/4 * 3
// clxGemelMeshL2.position.y = fy + 0.72
// clxGemelMeshL2.rotation.x = -ac
gsap.to(clxGemelMeshL2.position, {
z: 0.5 - z/4 * 3,
y: fy + 0.72,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshL2.rotation, {
x: -ac,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
// clxGemelMeshR1.position.z = 0.5 - z/4
// clxGemelMeshR1.position.y = fy + 0.72
// clxGemelMeshR1.rotation.x = ac
gsap.to(clxGemelMeshR1.position, {
z: 0.5 - z/4,
y: fy + 0.72,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshR1.rotation, {
x: ac,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
// clxGemelMeshR2.position.z = 0.5 - z/4 * 3
// clxGemelMeshR2.position.y = fy + 0.72
// clxGemelMeshR2.rotation.x = ac
gsap.to(clxGemelMeshR2.position, {
z: 0.5 - z/4 * 3,
y: fy + 0.72,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshR2.rotation, {
x: ac,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
return gsap.to(clxFork.position, {
z: -z,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
}
animationHideFork(): gsap.core.Tween {
return this.animationShowFork(0)
}
animationUpFork(y: number): gsap.core.Tween {
const clxFork = this.getObjectByName('clxFork')
const clxGemelMeshL1 = this.getObjectByName('clxGemelMeshL1')
const clxGemelMeshL2 = this.getObjectByName('clxGemelMeshL2')
const clxGemelMeshR1 = this.getObjectByName('clxGemelMeshR1')
const clxGemelMeshR2 = this.getObjectByName('clxGemelMeshR2')
gsap.to(clxGemelMeshL1.position, {
y: y + 0.72,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshL2.position, {
y: y + 0.72,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshR1.position, {
y: y + 0.72,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
gsap.to(clxGemelMeshR2.position, {
y: y + 0.72,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
return gsap.to(clxFork.position, {
y: y,
duration: 3,
repeat: 0,
ease: 'sine.inOut'
})
}
animationDownFork(): gsap.core.Tween {
return this.animationUpFork(0)
}
}

Loading…
Cancel
Save