front/src/components/Promo/gallery.vue

@@ -62,9 +62,9 @@ onMounted(() => {
         .attr('fill', (d, i) => `url(#img${i})`)
         .call(d3.drag()
             .on("start", (event, d) => circle.filter(p => p === d).raise().attr("stroke", "black"))
-            .on("drag", (event, d) => (d.x = event.x, d.y = event.y))
+            .on("drag", (event, d: any) => (d.x = event.x, d.y = event.y))
             .on("end", (event, d) => circle.filter(p => p === d).attr("stroke", null))
-            .on("start.update drag.update end.update", update))
+            .on("start.update drag.update end.update", update) as any)
 
     function update() {
         voronoi = d3.Delaunay.from(circles, d => d.x, d => d.y).voronoi([0, 0, width, height]);

front/src/components/Promo/main.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import { CameraControls, FBXModel, useProgress } from '@tresjs/cientos'
-import { TresCanvas, useRenderLoop } from '@tresjs/core';
+import { CameraControls, FBXModel, GlobalAudio, useProgress } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core';
 import { Vector3 } from 'three';
-import { onMounted, reactive, ref, watch } from 'vue';
+import { reactive } from 'vue';
 
 import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
+import audioUrl from '../../assets/promo/sounds/sea.ogg'
 
 const router = useRouter()
 
@@ -13,7 +14,7 @@ const minPan = new Vector3(-210, 0, -80);
 const maxPan = new Vector3(210, 0, 100);
 const _v = new Vector3();
 
-const onChange = (e) => {
+const onChange = (e: any) => {
     _v.copy(e._target);
     e._target.clamp(minPan, maxPan);
     _v.sub(e._target);
@@ -30,16 +31,9 @@ const controlsState = reactive({
     maxZoom: 1,
     minZoom: 0.2,
 })
-const boxRef = ref()
-const { onLoop } = useRenderLoop()
 
-onLoop(({ delta, elapsed }) => {
-    if (boxRef.value) {
-        boxRef.value.rotation.y += delta
-        boxRef.value.rotation.z = elapsed * 0.7
-    }
-})
 const { hasFinishLoading, progress } = await useProgress()
+
 </script>
 <template>
     <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
@@ -48,19 +42,24 @@ const { hasFinishLoading, progress } = await useProgress()
     <div :class="[{ 'invisible': !hasFinishLoading }]">
         <TresCanvas window-size alpha shadows>
             <TresPerspectiveCamera :position="cameraPosition" />
+            <GlobalAudio :src="audioUrl" :loop="true" start-trigger="#app" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />
             <Suspense>
-                <FBXModel :path="modelUrl"></FBXModel>
+                <FBXModel :path="modelUrl">
+                </FBXModel>
                 <template #fallback>
                     <TresMesh :position-x="0" :position-y="0">
                         <TresBoxGeometry :args="[10, 50, 50]" />
                     </TresMesh>
                 </template>
             </Suspense>
-            <TresMesh :position-x="200" :position-y="200" @click="router.push('/promo/main/item/1')">
-                <TresBoxGeometry :args="[10, 50, 50]" />
-                <TresMeshNormalMaterial />
-            </TresMesh>
+            <template v-for="i in 4">
+                <TresMesh :position-x="[1, 3].includes(i) ? 200 : 400" :position-z="[2, 4].includes(i) ? 200 : 100"
+                    @click="router.push(`/promo/main/item/${i}`)">
+                    <TresBoxGeometry :args="[10, 50, 50]" />
+                    <TresMeshNormalMaterial />
+                </TresMesh>
+            </template>
             <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow />
             <TresAmbientLight :intensity="5" />
         </TresCanvas>
@@ -70,6 +69,7 @@ const { hasFinishLoading, progress } = await useProgress()
 .invisible {
     visibility: hidden;
 }
+
 .loader {
     display: flex;
     justify-content: center;

front/src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+declare module "*.fbx";