feat: point-light

extensions/lights/src/point-light.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { defineWidget } from '@vue-motion/core';
+import { WidgetOptions } from '@vue-motion/lib';
+
+export interface PointLightOptions extends WidgetOptions {
+  constant?: number
+  exponent?: number
+  surfaceScale?: number
+  color: string
+  x: number
+  y: number
+  z: number
+  type: 'diffuse' | 'specular'
+}
+
+const props = defineProps<PointLightOptions>()
+const options = defineWidget<PointLightOptions>(props)
+
+const id = Math.random().toString(36).substring(2, 9)
+const diffuseId = options.wid || `diffuse-${id}`
+const specularId = options.wid || `specular-${id}`
+</script>
+
+<template>
+  <filter :id="diffuseId">
+    <feDiffuseLighting
+      :result="diffuseId"
+      :lighting-color="options.color"
+    >
+      <fePointLight
+        :x="options.x"
+        :y="options.y"
+        :z="options.z"
+        :diffuse-constant="options.type === 'diffuse' ? options.constant : ''"
+        :diffuse-exponent="options.type === 'diffuse' ? options.exponent : ''"
+        :surface-scale="options.surfaceScale"
+      />
+    </feDiffuseLighting>
+  </filter>
+  <filter :id="specularId">
+    <feSpecularLighting
+      :result="specularId"
+      :lighting-color="options.color"
+    >
+      <fePointLight
+        :x="options.x"
+        :y="options.y"
+        :z="options.z"
+        :specular-constant="options.type === 'specular' ? options.constant : ''"
+        :specular-exponent="options.type === 'specular' ? options.exponent : ''"
+        :surface-scale="options.surfaceScale"
+      />
+    </feSpecularLighting>
+  </filter>
+  <g :filter="`url(#${options.type === 'diffuse' ? diffuseId : specularId})`">
+    <slot></slot>
+  </g>
+</template>