feat(editor): add tween animation

interact extension add tween animation; pass "cube keyframe animation" run test; pass "camera keyframe animation" run test; (fix(action): run action: now script->onStop's meta3dState is the one after onInit)
Meta3D-Technology · Mar 9, 2024 · 40ec050 · 40ec050
1 parent d4b5363
commit 40ec050
Show file tree

Hide file tree

Showing 9 changed files with 1,360 additions and 11 deletions.
diff --git a/contributes/meta3d-action-run/src/Main.ts b/contributes/meta3d-action-run/src/Main.ts
@@ -90,10 +90,10 @@ export let getContribute: getContributeMeta3D<actionContribute<uiData, state>> =
                     meta3dState = _markIsRun(meta3dState, api, false)
                     meta3dState = _stopGameViewRender(meta3dState, api)
 
-                    meta3dState = api.restore(meta3dState, api.nullable.getExn(api.action.getActionState<state>(meta3dState, actionName)).meta3dStateBeforeRun)
-
 
                     return execEventHandle(meta3dState, api, "onStop", getViewServiceForEditor(meta3dState, api)).then(meta3dState => {
+                        meta3dState = api.restore(meta3dState, api.nullable.getExn(api.action.getActionState<state>(meta3dState, actionName)).meta3dStateBeforeRun)
+
                         return runGameViewRenderOnlyOnce(meta3dState, api, api.nullable.getExn(api.getPackageService<editorWholeService>(meta3dState, "meta3d-editor-whole-protocol")))
                     })
                 }))

diff --git a/doc/jiehuo.org b/doc/jiehuo.org
@@ -134,10 +134,96 @@ gameview c
 run
 
 
+* DONE learn three.js with keyframe animation
+
+TODO demo
+
+
+* DONE implement cube keyframe animation
+
+# ** TODO build data
+
+
+# ** TODO implement
+
+TODO use Tween to move cube
+
+TODO provide animation api
+
+
+
+* DONE implement camera keyframe animation to focus cube
+
+
+
+TODO compute new target, new distance
+    TODO use fake distance
+
+TODO use Tween to these new ones
+
+TODO provide animation api
+
+
+* TODO fix: if onStop error, recurse throw!
+
+
+* TODO fix: change action->immdiatlly run: action not work
+
+
+
+
+* TODO update engine
+
+* TODO publish and update
+
+TODO :
+interact e, p
+
+run
+
+
+* TODO add 2d ui(page)
+
+TODO page box
+
+TODO text
+
+TODO link
+
+
+
+* TODO add data binding
+
+TODO scene data:
+parent-child cubes
+ids
+description
+
+
+
+* TODO add 3d ui(billboard or face to one direction)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 * TODO future
 
+** TODO picking should return gameObjects instead of objects
+** TODO setSelectedObjects should use gameObjects instead of objects
+** TODO refactor: rename setSelectedObjects to setSelectedGameObjects
+
 
 ** TODO add Collider component
 
@@ -146,6 +232,9 @@ maintain boundingSphere, boundingBox
 TODO computeBounding in update job
 
 
+TODO update camera focus->new distance
+
+
 ** TODO add Picking component
 
 maintain ray, camera
@@ -166,6 +255,14 @@ TODO remove RayCaster
 
 
 
+** TODO sceneview add focus when press "f"
+
+*** TODO add hotkey
+
+*** TODO implement focus
+
+
+
 
 
 
@@ -180,6 +277,12 @@ TODO share allocate ECS ArrayBuffers when each run(visual, run)
 show log, error(e.g. error by script->handler)
 
 
+** TODO GameObjectAPI: add findGameObjectByName
+
+
+** TODO refactor: move "animation" out of interact package to be animation package
+
+
 
 ** TODO add MeshRender component
 

diff --git a/packages/interact/extensions/meta3d-interact/src/Main.ts b/packages/interact/extensions/meta3d-interact/src/Main.ts
@@ -1,11 +1,12 @@
 import { getExtensionService as getExtensionServiceMeta3D, createExtensionState as createExtensionStateMeta3D, getExtensionLife as getLifeMeta3D, state as meta3dState, api } from "meta3d-type"
 import { state } from "meta3d-interact-protocol/src/state/StateType"
-import { service } from "meta3d-interact-protocol/src/service/ServiceType"
+import { service, tweenId } from "meta3d-interact-protocol/src/service/ServiceType"
 import { service as eventService } from "meta3d-event-protocol/src/service/ServiceType"
 import { service as threeService } from "meta3d-three-protocol/src/service/ServiceType"
 import { state as converterState } from "meta3d-scenegraph-converter-three-protocol/src/state/StateType"
 import { getExn } from "meta3d-commonlib-ts/src/NullableUtils"
 import { getVertexPosition } from "./PositionUtils"
+import TWEEN from "./animation/tween.module"
 
 let _checkIntersection = (
 	threeAPIService,
@@ -348,6 +349,31 @@ let _ascSort = (a, b) => {
 
 }
 
+
+let _getMeta3dStateForAnimation = (api: api) => {
+	return api.nullable.getExn(globalThis["meta3d_animation_meta3dState"])
+}
+
+let _setMeta3dStateForAnimation = (meta3dState: meta3dState) => {
+	globalThis["meta3d_animation_meta3dState"] = meta3dState
+}
+
+let _getTween = (meta3dState: meta3dState, api: api, id: tweenId) => {
+	return api.nullable.getExn(api.getExtensionState<state>(meta3dState, "meta3d-interact-protocol").animation.tweens.get(id))
+}
+
+let _setTween = (meta3dState: meta3dState, api: api, id: tweenId, tween: any) => {
+	let state = api.getExtensionState<state>(meta3dState, "meta3d-interact-protocol")
+
+	return api.setExtensionState<state>(meta3dState,
+		"meta3d-interact-protocol", {
+		...state,
+		animation: {
+			tweens: state.animation.tweens.set(id, tween)
+		}
+	})
+}
+
 export let getExtensionService: getExtensionServiceMeta3D<
 	service
 > = (api) => {
@@ -439,14 +465,109 @@ export let getExtensionService: getExtensionServiceMeta3D<
 
 				return intersects;
 			},
+		},
+		animation: {
+			add: (meta3dState, id, object, {
+				onStart = (meta3dState, object) => meta3dState,
+				onUpdate = (meta3dState, object, elapsed) => meta3dState,
+				onRepeat = (meta3dState, object) => meta3dState,
+				onComplete = (meta3dState, object) => meta3dState,
+				onStop = (meta3dState, object) => meta3dState
+			}) => {
+				let state = api.getExtensionState<state>(meta3dState,
+					"meta3d-interact-protocol")
+
+				return api.setExtensionState<state>(meta3dState,
+					"meta3d-interact-protocol", {
+					...state,
+					animation: {
+						// tweens: state.animation.tweens.set(id, new TWEEN.Tween(object).onStart(onStart).onUpdate(onUpdate).onRepeat(onRepeat).onComplete(onComplete).onStop(onStop)
+						tweens: state.animation.tweens.set(id, new TWEEN.Tween(object).onStart((object) => {
+							_setMeta3dStateForAnimation(onStart(_getMeta3dStateForAnimation(api), object))
+						}).onUpdate((object, elapsed) => {
+							_setMeta3dStateForAnimation(onUpdate(_getMeta3dStateForAnimation(api), object, elapsed))
+						}).onRepeat((object) => {
+							_setMeta3dStateForAnimation(onRepeat(_getMeta3dStateForAnimation(api), object))
+						}).onComplete((object) => {
+							_setMeta3dStateForAnimation(onComplete(_getMeta3dStateForAnimation(api), object))
+						}).onStop((object) => {
+							_setMeta3dStateForAnimation(onStop(_getMeta3dStateForAnimation(api), object))
+						})
+						)
+					}
+				})
+			},
+			remove: (meta3dState, id) => {
+				TWEEN.remove(_getTween(meta3dState, api, id))
+
+				return meta3dState
+			},
+			to: (meta3dState, id, target, duration) => {
+				return _setTween(meta3dState, api, id, _getTween(meta3dState, api, id).to(target, duration))
+			},
+			start: (meta3dState, id, time) => {
+				_setMeta3dStateForAnimation(meta3dState)
+
+				return _setTween(meta3dState, api, id, _getTween(meta3dState, api, id).start(time))
+			},
+			stop: (meta3dState, id) => {
+				_setMeta3dStateForAnimation(meta3dState)
+
+				return _setTween(meta3dState, api, id, _getTween(meta3dState, api, id).stop())
+			},
+			end: (meta3dState, id) => {
+				_setMeta3dStateForAnimation(meta3dState)
+
+				return _setTween(meta3dState, api, id, _getTween(meta3dState, api, id).end())
+			},
+			pause: (meta3dState, id, time) => {
+				return _setTween(meta3dState, api, id, _getTween(meta3dState, api, id).pause(time))
+			},
+			resume: (meta3dState, id, time) => {
+				return _setTween(meta3dState, api, id, _getTween(meta3dState, api, id).resume(time))
+			},
+			repeat: (meta3dState, id, times) => {
+				_setMeta3dStateForAnimation(meta3dState)
+
+				return _setTween(meta3dState, api, id, _getTween(meta3dState, api, id).repeat(times))
+			},
+			isPlaying: (meta3dState, id) => {
+				return _getTween(meta3dState, api, id).isPlaying()
+			},
+			isPaused: (meta3dState, id) => {
+				return _getTween(meta3dState, api, id).isPaused()
+			},
+			update: (meta3dState, id, time) => {
+				let tween = _getTween(meta3dState, api, id)
+
+				_setMeta3dStateForAnimation(meta3dState)
+
+				let result = tween.update(time)
+
+				return [_setTween(meta3dState, api, id, tween), result]
+			},
+			updateAll: (meta3dState, time) => {
+				_setMeta3dStateForAnimation(meta3dState)
+
+				return [meta3dState, TWEEN.update(time)]
+			},
+			removeAll: (meta3dState) => {
+				TWEEN.removeAll()
+
+				return meta3dState
+			},
 		}
 	}
 }
 
 export let createExtensionState: createExtensionStateMeta3D<
 	state
 > = (meta3dState, api) => {
-	return null
+	return {
+		animation: {
+			tweens: api.immutable.createMap()
+		}
+	}
 }
 
 export let getExtensionLife: getLifeMeta3D<service> = (api, extensionProtocolName) => {