use fbx model

front/package-lock.json

@@ -10,7 +10,7 @@
       "dependencies": {
         "@fireworks-js/vue": "^2.10.7",
         "@tresjs/cientos": "^3.9.0",
-        "@tresjs/core": "^4.0.0-rc.0",
+        "@tresjs/core": "^3.9.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/cientos/node_modules/@tresjs/core": {
+    "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,20 +816,6 @@
         "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": "^4.0.0-rc.0",
+    "@tresjs/core": "^3.9.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

@@ -1,11 +0,0 @@
-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

@@ -1,260 +0,0 @@
-{
-  "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/main.vue

@@ -1,14 +1,13 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { shallowRef } from 'vue';
-import { CameraControls, FBXModel, GLTFModel, PositionalAudio, useGLTF, useProgress } from '@tresjs/cientos'
+import { onUnmounted, reactive, ref } from 'vue';
-import { TresCanvas, useLoader, useRenderLoop } from '@tresjs/core';
+import { CameraControls, FBXModel, PositionalAudio, useFBX, useProgress } from '@tresjs/cientos'
+import { TresCanvas, useRenderLoop } from '@tresjs/core';
 import { Vector3 } from 'three';
-import { GLTFLoader } from 'three/examples/jsm/Addons.js';
-import { onMounted, onUnmounted, reactive, ref } 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 jeepUrl from '../../assets/promo/models/jeep.fbx'
 import audioUrl from '../../assets/promo/sounds/sea.ogg'
 
 const router = useRouter()
@@ -23,8 +22,8 @@ const onChange = (e: any) => {
     e._camera.position.sub(_v);
 }
 
-const cameraPosition = new Vector3(200, 400, 800)
+const cameraPosition = [200, 400, 800]
-const lightPosition = new Vector3(80, 20, 100)
+const lightPosition = [3, 3, 3]
 
 const controlsState = reactive({
     minDistance: 300,
@@ -41,11 +40,12 @@ const positionalAudioRef = shallowRef()
 onUnmounted(() => {
     positionalAudioRef?.value?.dispose()
 })
+
 const ducks: any[] = []
 const ducksRef: any[] = []
 for (let index = 0; index < 4; index++) {
-    // const { scene } = await useLoader(GLTFLoader, duckUrl)
+    const model = await useFBX(jeepUrl)
-    // ducks.push(scene)
+    ducks.push(model)
     ducksRef.push(ref())
 }
 const { onLoop } = useRenderLoop()
@@ -54,42 +54,35 @@ onLoop(() => {
     for (let index = 0; index < ducksRef.length; index++) {
         const element = ducksRef[index];
         if (element.value) {
-            element.value[0].rotation.y += 0.01 * index
+            element.value[0].rotation.y += 0.01 * (index + 1)
         }
     }
 })
 </script>
 <template>
-    <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
+    <div>
-        Загрузка {{ progress }}%
+        <TresCanvas window-size alpha shadows>
-    </div>
-    <div :class="[{ 'invisible': !hasFinishLoading }]">
-        <TresCanvas window-size alpha shadows :on-click="() => console.log('Scene')">
             <TresPerspectiveCamera :position="cameraPosition" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />
 
-            <Suspense>
+            <Suspense v-if=false>
                 <FBXModel :path="modelUrl">
                     <PositionalAudio ref="positionalAudioRef" :url="audioUrl" :loop="true" :inner-angle="360" />
                 </FBXModel>
             </Suspense>
-
+            <Suspense>
-            <TresMesh :position-x="400" :position-z="400" @click="() => console.log('click big red item')">
+                <FBXModel :path="jeepUrl" :scale="0.5"></FBXModel>
-                <TresBoxGeometry :args="[100, 100, 100]" />
+            </Suspense>
-                <TresMeshBasicMaterial color="red" />
-            </TresMesh>
             <template v-for="i in 4">
                 <Suspense>
                     <TresMesh :position-x="[1, 3].includes(i) ? -300 : 300" :position-z="100 * i"
-                        @click="() => console.log('click on duck')" :ref="ducksRef[i]" cast-shadow>
+                        @click="() => console.log('click on duck')" :ref="ducksRef[i - 1]">
-                        <TresBoxGeometry :args="[100, 100, 100]" />
+                        <primitive :object="ducks[i - 1]" :scale="0.25" />
-                <TresMeshBasicMaterial color="red" />
                     </TresMesh>
                 </Suspense>
             </template>
-
+            <TresDirectionalLight :position="lightPosition" :intensity="5" />
-            <TresDirectionalLight :position="lightPosition" :intensity="15" cast-shadow />
+            <TresAmbientLight />
-            <TresAmbientLight :intensity="5" />
         </TresCanvas>
     </div>
 </template>