temp light controls

components/expDiagram.vue

@@ -14,6 +14,33 @@ const explosion_state = useState<boolean>('explosion_state', () => false)
 const toggleExpState = () => {
     explosion_state.value = !explosion_state.value
 }
+const back_light = ref()
+const key_light = ref()
+const secondary_light = ref()
+const loadAll = async () => {
+    const { scene: back } = await useGLTF('/models_light/back_exp.glb')
+    const { scene: key } = await useGLTF('/models_light/key_exp.glb')
+    const { scene: secondary } = await useGLTF('/models_light/secondary_exp.glb')
+
+    const k = 1
+
+    back_light.value = back.children[0]
+    // back_light.value.intensity = back_light.value.intensity * k
+    back_light.value.intensity = 250
+
+    key_light.value = key.children[0]
+    // key_light.value.intensity = key_light.value.intensity * k
+    key_light.value.intensity = 250
+    key_light.value.cast_shadow = true
+
+    secondary_light.value = secondary.children[0]
+    // secondary_light.value.intensity = secondary_light.value.intensity * k
+    secondary_light.value.intensity = 50
+
+}
+onMounted(() => {
+    loadAll()
+})
 </script>
 <template>
     <div class="h-96 relative">
@@ -26,15 +53,28 @@ const toggleExpState = () => {
                 </Suspense>
                 <ModelDiagram />
 
-                <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="#f2f2f2" cast-shadow />
-                <TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="#f2f2f2" cast-shadow />
-                <TresAmbientLight />
+                <TresPointLight v-bind="back_light" v-if="back_light":position="[back_light.position.x, back_light.position.y, back_light.position.z]" />
+                <TresPointLight v-bind="key_light" v-if="key_light":position="[key_light.position.x, key_light.position.y, key_light.position.z]" />
+                <TresPointLight v-bind="secondary_light" v-if="secondary_light"
+                    :position="[secondary_light.position.x, secondary_light.position.y, secondary_light.position.z]" />
             </TresCanvas>
         </ClientOnly>
         <span class="cursor-pointer absolute text-3xl top-0 left-0" @click="toggleExpState">
             <Icon name="mdi:checkbox-outline" v-if="explosion_state" />
             <Icon name="mdi:square-outline" v-else />
         </span>
+        <div class="grid grid-cols-3 bg-slate-400">
+            <template v-for="(value, key) in { back: back_light, key: key_light, secondary: secondary_light }">
+                <div v-if="value">
+                    <strong>{{ key }}</strong><br />
+                    <label>decay</label><input type="number" step="0.1" v-model="value.decay" /><br />
+                    <label>intensity</label><input type="number" step="0.1" v-model="value.intensity" /><br />
+                    <label>position x</label><input type="number" step="0.1" v-model="value.position.x" /><br />
+                    <label>position y</label><input type="number" step="0.1" v-model="value.position.y" /><br />
+                    <label>position z</label><input type="number" step="0.1" v-model="value.position.z" /><br />
+                </div>
+            </template>
+        </div>
     </div>
 </template>