Reapply "fix wierd psd tools missing canvas issue"

This reverts commit c560bcf.

Author: bea4dev

project/project.tsx

@@ -1,11 +1,15 @@
 import { useAnimation, useVariable } from "../src/lib/animation"
-import { DrawText } from "../src/lib/animation/effect/draw-text"
 import { BEZIER_SMOOTH } from "../src/lib/animation/functions"
 import { Clip } from "../src/lib/clip"
 import { seconds } from "../src/lib/frame"
 import { FillFrame } from "../src/lib/layout/fill-frame"
 import { Project, type ProjectSettings } from "../src/lib/project"
 import { TimeLine } from "../src/lib/timeline"
+import {
+  THREE,
+  ThreeCanvas,
+  disposeThreeObject,
+} from "../src/lib/webgl/three"
 
 export const PROJECT_SETTINGS: ProjectSettings = {
   name: "framescript-template",
@@ -14,28 +18,72 @@ export const PROJECT_SETTINGS: ProjectSettings = {
   fps: 60,
 }
 
-const HelloScene = () => {
-  const progress = useVariable(0)
-  const color = useVariable("#FFFFFF")
+const CubeScene = () => {
+  const rotationY = useVariable(0)
+  const rotationX = useVariable(0)
+  const positionX = useVariable(0)
+  const scale = useVariable(1)
 
   useAnimation(async (context) => {
     await context.parallel([
-      context.move(progress).to(1, seconds(3), BEZIER_SMOOTH),
-      context.move(color).to("#75a9bd", seconds(3), BEZIER_SMOOTH),
+      context.move(rotationY).to(Math.PI * 2, seconds(4), BEZIER_SMOOTH),
+      context.move(positionX).to(2, seconds(2), BEZIER_SMOOTH),
     ])
-    await context.sleep(seconds(1))
-    await context.move(progress).to(0, seconds(3), BEZIER_SMOOTH)
+    await context.parallel([
+      context.move(positionX).to(-2, seconds(2), BEZIER_SMOOTH),
+      context.move(rotationX).to(Math.PI, seconds(2), BEZIER_SMOOTH),
+    ])
+    await context.parallel([
+      context.move(positionX).to(0, seconds(2), BEZIER_SMOOTH),
+      context.move(scale).to(1.5, seconds(1), BEZIER_SMOOTH),
+      context
+        .move(rotationY)
+        .to(Math.PI * 4, seconds(2), BEZIER_SMOOTH),
+    ])
+    await context.move(scale).to(1, seconds(2), BEZIER_SMOOTH)
   }, [])
 
   return (
-    <FillFrame style={{ alignItems: "center", justifyContent: "center" }}>
-      <DrawText
-        text="Hello, world!"
-        fontUrl="assets/NotoSerifCJKJP-Medium.ttf"
-        strokeWidth={2}
-        progress={progress}
-        strokeColor={color.use()}
-        fillColor={color.use()}
+    <FillFrame style={{ backgroundColor: "#000000" }}>
+      <ThreeCanvas
+        clearColor={0x000000}
+        clearAlpha={1}
+        setup={({ size }) => {
+          const scene = new THREE.Scene()
+          const camera = new THREE.PerspectiveCamera(
+            45,
+            size.cssWidth / size.cssHeight,
+            0.1,
+            100,
+          )
+          camera.position.set(0, 0, 6)
+
+          const ambient = new THREE.AmbientLight(0xffffff, 0.4)
+          scene.add(ambient)
+
+          const directional = new THREE.DirectionalLight(0xffffff, 1.0)
+          directional.position.set(3, 4, 5)
+          scene.add(directional)
+
+          const cube = new THREE.Mesh(
+            new THREE.BoxGeometry(1.5, 1.5, 1.5),
+            new THREE.MeshStandardMaterial({ color: 0x2266ff }),
+          )
+          scene.add(cube)
+
+          return {
+            scene,
+            camera,
+            update: ({ frame }) => {
+              cube.rotation.y = rotationY.get(frame)
+              cube.rotation.x = rotationX.get(frame)
+              cube.position.x = positionX.get(frame)
+              const s = scale.get(frame)
+              cube.scale.set(s, s, s)
+            },
+            dispose: () => disposeThreeObject(cube),
+          }
+        }}
       />
     </FillFrame>
   )
@@ -45,8 +93,8 @@ export const PROJECT = () => {
   return (
     <Project>
       <TimeLine>
-        <Clip label="Hello">
-          <HelloScene />
+        <Clip label="Cube">
+          <CubeScene />
         </Clip>
       </TimeLine>
     </Project>