feat(extension-three): basic graph

extensions/three/src/cube.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import type { Camera, Scene } from 'three'
+import { BoxGeometry, Mesh, MeshBasicMaterial } from 'three'
+import { defineWidget } from '@vue-motion/core'
+import type { Object3DOptions } from './object3d'
+
+export interface CubeOptions extends Object3DOptions {
+  width: number
+  height: number
+  depth: number
+}
+
+const props = defineProps<CubeOptions>()
+const options = defineWidget<CubeOptions>(props)
+const camera = inject('camera') as Camera
+const scene = inject('scene') as Scene
+
+const box = new BoxGeometry(options.width, options.height, options.depth)
+const material = new MeshBasicMaterial()
+const cube = new Mesh(box, material)
+scene.add(cube)
+</script>

extensions/three/src/index.ts

@@ -1,4 +1,7 @@
-export type { Widget3DOptions } from './widget3d.vue'
-export { default as Widget3D } from './widget3d.vue'
+export type { Widget3DOptions } from './widget3d'
+export type { Object3DOptions } from './object3d'
+
 export type { ThreeOptions } from './three.vue'
 export { default as Three } from './three.vue'
+export type { CubeOptions } from './cube.vue'
+export { default as Cube } from './cube.vue'

extensions/three/src/object3d.ts

@@ -0,0 +1,9 @@
+import type { Widget3DOptions } from './widget3d.ts'
+
+export interface Object3DOptions extends Widget3DOptions {
+  fillColor?: string
+  borderColor?: string
+  borderWidth?: number
+  borderOffset?: number
+  borderInterval?: number[]
+}

extensions/three/src/three.vue

@@ -2,8 +2,8 @@
 import type { WidgetOptions } from '@vue-motion/lib'
 import { widget } from '@vue-motion/lib'
 import { defineWidget } from '@vue-motion/core'
-import { BoxGeometry, DirectionalLight, Mesh, MeshPhongMaterial, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
-import { onMounted, ref } from 'vue'
+import { Color, PerspectiveCamera, Scene, WebGLRenderer } from 'three'
+import { onMounted, provide, ref } from 'vue'
 
 export interface ThreeOptions extends WidgetOptions {
   width: number
@@ -14,51 +14,44 @@ export interface ThreeOptions extends WidgetOptions {
     near?: number
     far?: number
   }
+  background?: string
 }
 
 const props = defineProps<ThreeOptions>()
 const options = defineWidget<ThreeOptions>(props)
 
 const scene = new Scene()
+scene.background = new Color(options.background ?? 'black')
 const canvas = new OffscreenCanvas(options.width, options.height)
 const camera = new PerspectiveCamera(
   (options.cameraConfig ?? {}).fov ?? 50,
   (options.cameraConfig ?? {}).aspect ?? options.width / options.height,
   (options.cameraConfig ?? {}).near ?? 0.1,
   (options.cameraConfig ?? {}).far ?? 2000,
 )
-camera.position.z = 5
 
 const renderer = new WebGLRenderer({
   canvas,
 })
 
-const url = ref('')
+provide('scene', scene)
+provide('camera', camera)
 
-// Create a small box
-const geometry = new BoxGeometry(1, 1, 1)
-const material = new MeshPhongMaterial({ color: 0x00FF00 })
-const cube = new Mesh(geometry, material)
-scene.add(cube)
+const url = ref('')
 
-// Add a directional light
-const light = new DirectionalLight(0xFFFFFF, 1)
-light.position.set(5, 5, 5).normalize()
-scene.add(light)
+renderer.setSize(options.width, options.height)
+renderer.setPixelRatio(window.devicePixelRatio)
 
 onMounted(async () => {
   renderer.render(scene, camera)
   url.value = window.URL.createObjectURL(await canvas.convertToBlob())
-  console.log(url)
 })
 </script>
 
 <template>
   <g v-bind="widget(options)">
     <image
       :href="url"
-      :width="options.width"
-      :height="options.height"
     />
   </g>
 </template>

extensions/three/src/widget3d.ts

@@ -0,0 +1,14 @@
+import type { WidgetOptions } from "@vue-motion/lib"
+
+export interface Widget3DOptions extends WidgetOptions {
+  x?: number
+  y?: number
+  z?: number
+  rx?: number
+  ry?: number
+  rz?: number
+  scaleX?: number
+  scaleY?: number
+  scaleZ?: number
+  opacity?: number
+}

test/src/App.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { usePlayer } from '@vue-motion/core'
-import { Motion, move } from '@vue-motion/lib'
+import { Motion } from '@vue-motion/lib'
 import { onMounted } from 'vue'
 import { Tex } from '@vue-motion/extension-math'
 import { PointLight } from '@vue-motion/extension-lights'
+import { Cube, Three } from '@vue-motion/extension-three'
 
 onMounted(() => {
   const player = usePlayer()
@@ -16,16 +17,7 @@ onMounted(() => {
     <!-- <Typst>Hello World</Typst> -->
     <PointLight type="diffuse" :x="20" :y="20" :z="0.5" :constant="0.5" color="skyblue">
       <Tex
-        :katex-options="{}" :anis="[
-          [
-            move,
-            {
-              duration: 1,
-              offsetX: 100,
-              offsetY: 100,
-            },
-          ],
-        ]"
+        :katex-options="{}"
         wid="www"
       >
         c=\sqrt{a^2 + b^2}
@@ -34,5 +26,8 @@ onMounted(() => {
       <!--        <Three :width="1000" :height="1000" :camera-config="{}" :x="-500" :y="-500"/> -->
       <!--      </Suspense> -->
     </PointLight>
+    <Three :width="300" :height="300">
+      <Cube :width="1" :height="1" :depth="1"/>
+    </Three>
   </Motion>
 </template>