front/package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@fireworks-js/vue": "^2.10.7",
         "@tresjs/cientos": "^3.9.0",
-        "@tresjs/core": "^3.9.0",
+        "@tresjs/core": "^4.0.0-rc.0",
         "@vueuse/components": "^10.9.0",
         "@vueuse/core": "^10.9.0",
         "d3": "^7.9.0",
@@ -802,7 +802,7 @@
         "vue": ">=3.3"
       }
     },
-    "node_modules/@tresjs/core": {
+    "node_modules/@tresjs/cientos/node_modules/@tresjs/core": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/@tresjs/core/-/core-3.9.0.tgz",
       "integrity": "sha512-6el70oXSduTvSA3XCI8/rQV2GzcgCLceZKA443CTU/MBPmRDULJ12q/UYl18Ij4CJ68rTqgVi0Da+WNMrs784A==",
@@ -816,6 +816,20 @@
         "vue": ">=3.3"
       }
     },
+    "node_modules/@tresjs/core": {
+      "version": "4.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/@tresjs/core/-/core-4.0.0-rc.0.tgz",
+      "integrity": "sha512-xztDCvDbIisHUWY6Axwy4swMj/LgxmfJRSke3E1gKV+W5uS77sWxD2r9i5rzUq+Gh4Gq8Vt5xNnS1D01QL412Q==",
+      "dependencies": {
+        "@alvarosabu/utils": "^3.2.0",
+        "@vue/devtools-api": "^6.6.1",
+        "@vueuse/core": "^10.9.0"
+      },
+      "peerDependencies": {
+        "three": ">=0.133",
+        "vue": ">=3.4"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",

front/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@fireworks-js/vue": "^2.10.7",
     "@tresjs/cientos": "^3.9.0",
-    "@tresjs/core": "^3.9.0",
+    "@tresjs/core": "^4.0.0-rc.0",
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
     "d3": "^7.9.0",

front/src/assets/promo/models/rubber_duck (1)/license.txt

@@ -0,0 +1,11 @@
+Model Information:
+* title:	Rubber duck
+* source:	https://sketchfab.com/3d-models/rubber-duck-09beba2fa834415f89734b21376fd886
+* author:	samene (https://sketchfab.com/samene)
+
+Model License:
+* license type:	CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
+* requirements:	Author must be credited. Commercial use is allowed.
+
+If you use this 3D model in your project be sure to copy paste this credit wherever you share it:
+This work is based on "Rubber duck" (https://sketchfab.com/3d-models/rubber-duck-09beba2fa834415f89734b21376fd886) by samene (https://sketchfab.com/samene) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)

front/src/assets/promo/models/rubber_duck (1)/scene.gltf

@@ -0,0 +1,260 @@
+{
+  "accessors": [
+    {
+      "bufferView": 2,
+      "componentType": 5126,
+      "count": 3737,
+      "max": [
+        0.6664810180664063,
+        0.8251870274543762,
+        1.0
+      ],
+      "min": [
+        -0.6664810180664063,
+        -0.8251870274543762,
+        -1.0
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 2,
+      "byteOffset": 44844,
+      "componentType": 5126,
+      "count": 3737,
+      "max": [
+        1.0,
+        1.0,
+        1.0
+      ],
+      "min": [
+        -1.0,
+        -1.0,
+        -1.0
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 3,
+      "componentType": 5126,
+      "count": 3737,
+      "max": [
+        1.0,
+        0.9991883039474487,
+        1.0,
+        1.0
+      ],
+      "min": [
+        -1.0,
+        -0.9989029169082642,
+        -1.0,
+        -1.0
+      ],
+      "type": "VEC4"
+    },
+    {
+      "bufferView": 1,
+      "componentType": 5126,
+      "count": 3737,
+      "max": [
+        0.9725810289382935,
+        0.9348239898681641
+      ],
+      "min": [
+        0.05584320053458214,
+        0.042854998260736465
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 0,
+      "componentType": 5125,
+      "count": 18900,
+      "type": "SCALAR"
+    }
+  ],
+  "asset": {
+    "extras": {
+      "author": "samene (https://sketchfab.com/samene)",
+      "license": "CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)",
+      "source": "https://sketchfab.com/3d-models/rubber-duck-09beba2fa834415f89734b21376fd886",
+      "title": "Rubber duck"
+    },
+    "generator": "Sketchfab-12.67.0",
+    "version": "2.0"
+  },
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteLength": 75600,
+      "name": "floatBufferViews",
+      "target": 34963
+    },
+    {
+      "buffer": 0,
+      "byteLength": 29896,
+      "byteOffset": 75600,
+      "byteStride": 8,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 89688,
+      "byteOffset": 105496,
+      "byteStride": 12,
+      "name": "floatBufferViews",
+      "target": 34962
+    },
+    {
+      "buffer": 0,
+      "byteLength": 59792,
+      "byteOffset": 195184,
+      "byteStride": 16,
+      "name": "floatBufferViews",
+      "target": 34962
+    }
+  ],
+  "buffers": [
+    {
+      "byteLength": 254976,
+      "uri": "scene.bin"
+    }
+  ],
+  "images": [
+    {
+      "uri": "textures/lambert1_baseColor.jpeg"
+    },
+    {
+      "uri": "textures/lambert1_metallicRoughness.png"
+    },
+    {
+      "uri": "textures/lambert1_normal.png"
+    }
+  ],
+  "materials": [
+    {
+      "doubleSided": true,
+      "name": "lambert1",
+      "normalTexture": {
+        "index": 2
+      },
+      "pbrMetallicRoughness": {
+        "baseColorTexture": {
+          "index": 0
+        },
+        "metallicRoughnessTexture": {
+          "index": 1
+        }
+      }
+    }
+  ],
+  "meshes": [
+    {
+      "name": "defaultMaterial",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 1,
+            "POSITION": 0,
+            "TANGENT": 2,
+            "TEXCOORD_0": 3
+          },
+          "indices": 4,
+          "material": 0,
+          "mode": 4
+        }
+      ]
+    }
+  ],
+  "nodes": [
+    {
+      "children": [
+        1
+      ],
+      "matrix": [
+        1.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        2.220446049250313e-16,
+        -1.0,
+        0.0,
+        0.0,
+        1.0,
+        2.220446049250313e-16,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        1.0
+      ],
+      "name": "Sketchfab_model"
+    },
+    {
+      "children": [
+        2
+      ],
+      "matrix": [
+        1.0,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        -4.371139006309477e-08,
+        0.999999999999999,
+        0.0,
+        0.0,
+        -0.999999999999999,
+        -4.371139006309477e-08,
+        0.0,
+        0.0,
+        0.0,
+        0.0,
+        1.0
+      ],
+      "name": "Collada visual scene group"
+    },
+    {
+      "children": [
+        3
+      ],
+      "name": "patitodegoma2"
+    },
+    {
+      "mesh": 0,
+      "name": "defaultMaterial"
+    }
+  ],
+  "samplers": [
+    {
+      "magFilter": 9729,
+      "minFilter": 9987,
+      "wrapS": 10497,
+      "wrapT": 10497
+    }
+  ],
+  "scene": 0,
+  "scenes": [
+    {
+      "name": "Sketchfab_Scene",
+      "nodes": [
+        0
+      ]
+    }
+  ],
+  "textures": [
+    {
+      "sampler": 0,
+      "source": 0
+    },
+    {
+      "sampler": 0,
+      "source": 1
+    },
+    {
+      "sampler": 0,
+      "source": 2
+    }
+  ]
+}

front/src/components/Promo/item.vue

@@ -1,6 +1,12 @@
+<script setup lang=ts>
+import { useRoute } from 'vue-router';
+
+const route = useRoute()
+const name = route.params.name
+</script>
 <template>
     <div class="container">
-        Это внутренняя страница
+        Это внутренняя страница #{{ name }}
         <RouterLink to="/promo/main">Назад</RouterLink>
     </div>
 </template>

front/src/components/Promo/main.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import { CameraControls, FBXModel, GlobalAudio, useProgress } from '@tresjs/cientos'
+import { CameraControls, FBXModel, PositionalAudio, useGLTF, useProgress } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core';
 import { Vector3 } from 'three';
-import { reactive } from 'vue';
+import { onMounted, onUnmounted, reactive } from 'vue';
 
 import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
+import duckUrl from '../../assets/promo/models/rubber_duck (1)/scene.gltf'
 import audioUrl from '../../assets/promo/sounds/sea.ogg'
+import { shallowRef } from 'vue';
+
 
 const router = useRouter()
 
@@ -22,7 +25,7 @@ const onChange = (e: any) => {
 }
 
 const cameraPosition = new Vector3(200, 400, 800)
-const lightPosition = new Vector3(-4, 4, 4)
+const lightPosition = new Vector3(80, 20, 100)
 
 const controlsState = reactive({
     minDistance: 300,
@@ -34,33 +37,44 @@ const controlsState = reactive({
 
 const { hasFinishLoading, progress } = await useProgress()
 
+const positionalAudioRef = shallowRef()
+
+onUnmounted(() => {
+    positionalAudioRef?.value?.dispose()
+})
+const ducks: any[] = []
+for (let index = 0; index < 4; index++) {
+    const { scene } = await useGLTF(duckUrl)
+    ducks.push(scene)
+}
 </script>
 <template>
     <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
         Загрузка {{ progress }}%
     </div>
     <div :class="[{ 'invisible': !hasFinishLoading }]">
-        <TresCanvas window-size alpha shadows>
+        <TresCanvas window-size alpha shadows :on-click="() => console.log('Scene')">
             <TresPerspectiveCamera :position="cameraPosition" />
-            <GlobalAudio :src="audioUrl" :loop="true" start-trigger="#app" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />
+
             <Suspense>
                 <FBXModel :path="modelUrl">
+                    <PositionalAudio ref="positionalAudioRef" :url="audioUrl" :loop="true" :inner-angle="360" />
                 </FBXModel>
-                <template #fallback>
-                    <TresMesh :position-x="0" :position-y="0">
-                        <TresBoxGeometry :args="[10, 50, 50]" />
-                    </TresMesh>
-                </template>
             </Suspense>
+
+            <TresMesh :position-x="400" :position-z="400" @click="() => console.log('click big red item')">
+                <TresBoxGeometry :args="[100, 100, 100]" />
+                <TresMeshBasicMaterial color="red" />
+            </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 :position-x="[1, 3].includes(i) ? -300 : 300" :position-z="100 * i"
+                    @click="() => console.log('click on duck')">
+                    <primitive :object="ducks[i - 1]" :scale="40"></primitive>
                 </TresMesh>
             </template>
-            <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow />
+
+            <TresDirectionalLight :position="lightPosition" :intensity="15" cast-shadow />
             <TresAmbientLight :intensity="5" />
         </TresCanvas>
     </div>

front/src/vite-env.d.ts

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

front/vite.config.ts

@@ -20,5 +20,5 @@ export default defineConfig({
     Icons(),
     svgLoader(),
   ],
-  assetsInclude: ['**/*.fbx'],
+  assetsInclude: ['**/*.fbx', '**/*.gltf'],
 })