gltf model

front/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    copy: typeof import('./src/components/Promo/modelItem copy.vue')['default']
     Floorplan: typeof import('./src/components/Floorplan/index.vue')['default']
     Gallery: typeof import('./src/components/Promo/gallery.vue')['default']
     Game: typeof import('./src/components/Game.vue')['default']
@@ -20,6 +21,7 @@ declare module 'vue' {
     Item: typeof import('./src/components/Floorplan/item.vue')['default']
     Main: typeof import('./src/components/Promo/main.vue')['default']
     ModelItem: typeof import('./src/components/Promo/modelItem.vue')['default']
+    ModelItem2: typeof import('./src/components/Promo/modelItem2.vue')['default']
     Models: typeof import('./src/components/Promo/models.vue')['default']
     Projects: typeof import('./src/components/Projects.vue')['default']
     Promo: typeof import('./src/components/Promo/index.vue')['default']

front/src/components/Promo/main.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { reactive, ref, shallowReactive, } from 'vue';
+import { reactive } from 'vue';
 import { Vector3 } from 'three';
 import { TresCanvas } from '@tresjs/core';
-import { Fbo, CameraControls, Environment, useProgress } from '@tresjs/cientos'
+import { CameraControls,  useProgress } from '@tresjs/cientos'
 
 import sunset from '../../assets/promo/models/sunset.hdr'
 console.log(sunset)
@@ -46,8 +46,8 @@ const { hasFinishLoading, progress } = await useProgress()
             <Suspense>
                 <Models />
             </Suspense>
-            <TresDirectionalLight :position="lightPosition" :intensity="5" cast-shadow />
+            <!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
-            <TresAmbientLight />
+            <!-- <TresAmbientLight /> -->
         </TresCanvas>
     </div>
 </template>

front/src/components/Promo/modelItem.vue

@@ -1,30 +1,32 @@
 <script setup lang="ts">
 import { Box3, Vector3 } from 'three';
-import { useFBX, } from '@tresjs/cientos'
+import { useGLTF, } from '@tresjs/cientos'
-const props = defineProps(['modelUrl', 'onClick'])
-const model = await useFBX(props.modelUrl)
 
+const props = defineProps(['modelUrl', 'onClick'])
+
+const { scene } = await useGLTF(props.modelUrl)
 const box = new Box3();
-box.expandByObject(model.children[0]);
+box.expandByObject(scene.children[0]);
 let center = new Vector3();
 box.getCenter(center)
 let size = new Vector3();
 box.getSize(size)
 
-const box_size = [size.x - 0.1, size.y - 0.1, size.z - 0.1]
+const box_size = [size.x, size.y, size.z]
 
 const show_alert = () => {
     alert(props.modelUrl)
 }
+scene.castShadow = true
 </script>
 <template>
     <TresGroup :posiion="[0, 0, 0]">
         <TresMesh :position="center" @click="show_alert">
             <TresBoxGeometry :args="box_size" />
-            <TresMeshBasicMaterial :opacity="0.5" color="pink" :transparent="true" />
+            <TresMeshBasicMaterial :opacity="0" color="pink" :transparent="true" />
         </TresMesh>
         <TresMesh>
-            <primitive :object="model" />
+            <primitive :object="scene" />
         </TresMesh>
     </TresGroup>
 </template>

front/src/components/Promo/models.vue

@@ -1,20 +1,46 @@
 <script setup lang="ts">
-import { useFBX, } from '@tresjs/cientos'
+import { ACESFilmicToneMapping, RepeatWrapping } from 'three'
+import { useTexture, useTresContext } from '@tresjs/core'
+
 import { Environment } from '@tresjs/cientos'
-import andreyUrl from '../../assets/promo/models/quadro/andrey.fbx'
+// import andreyUrl from '../../assets/promo/models/quadro/andrey.fbx'
-import groundUrl from '../../assets/promo/models/quadro/ground.fbx'
+// import mangalUrl from '../../assets/promo/models/quadro/mangal.fbx'
-import mangalUrl from '../../assets/promo/models/quadro/mangal.fbx'
+// import pillarUrl from '../../assets/promo/models/quadro/pillar.fbx'
-import pillarUrl from '../../assets/promo/models/quadro/pillar.fbx'
+// import pointerUrl from '../../assets/promo/models/quadro/pointer.fbx'
-import pointerUrl from '../../assets/promo/models/quadro/pointer.fbx'
+// import quadUrl from '../../assets/promo/models/quadro/quad.fbx'
-import quadUrl from '../../assets/promo/models/quadro/quad.fbx'
+// import walkbayUrl from '../../assets/promo/models/quadro/walkway.fbx'
-import skyUrl from '../../assets/promo/models/quadro/sky.fbx'
+
-import walkbayUrl from '../../assets/promo/models/quadro/walkway.fbx'
+// import groundUrl from '../../assets/promo/models/quadro/ground.fbx'
+// import skyUrl from '../../assets/promo/models/quadro/sky.fbx'
 
 import hdrmap from "../../assets/promo/models/sunset.hdr"
 
-const groundModel = await useFBX(groundUrl)
+import gr_map from '../../assets/promo/models/quadro/Ground_Color_1k.jpg'
+import gr_normalMap from '../../assets/promo/models/quadro/Ground_Normal_1k.jpg'
+import gr_roughnessMap from '../../assets/promo/models/quadro/Ground_Roughness_1k.jpg'
+
+const { map, normalMap } = await useTexture({
+    map: gr_map,
+    normalMap: gr_normalMap,
+    roughnessMap: gr_roughnessMap,
+})
+const { renderer } = useTresContext()
+
+renderer.value.toneMapping = ACESFilmicToneMapping
+renderer.value.toneMappingExposure = 0.5
+
+const repeat = 20
+
+map.wrapS = RepeatWrapping
+map.wrapT = RepeatWrapping
+map.repeat.x = repeat
+map.repeat.y = repeat
+
+normalMap.wrapS = RepeatWrapping
+normalMap.wrapT = RepeatWrapping
+normalMap.repeat.x = repeat
+normalMap.repeat.y = repeat
 
-// console.log(groundModel.children[0].material)
 </script>
 <template>
     <TresGroup>
@@ -22,16 +48,17 @@ const groundModel = await useFBX(groundUrl)
             <Environment background :files="hdrmap" />
         </Suspense>
         <TresMesh :rotate-x="-Math.PI * 0.5">
-            <TresPlaneGeometry :args="[50, 50]" />
+            <TresPlaneGeometry :args="[repeat * 20, repeat * 20]" />
-            <TresMeshPhongMaterial v-bind="groundModel.children[0].material" />
+            <TresMeshStandardMaterial :map="map" :normalMap="normalMap" />
         </TresMesh>
-
+        <!-- <TresDirectionalLight :position="[10, 1, 1]" :intensity="10" cast-shadow /> -->
-        <ModelItem :modelUrl="andreyUrl" />
+        <ModelItem :modelUrl="'/walkway.glb'" />
-        <ModelItem :modelUrl="mangalUrl" />
+        <!-- <ModelItem :modelUrl="andreyUrl" /> -->
-        <ModelItem :modelUrl="pillarUrl" />
+        <!-- <ModelItem :modelUrl="mangalUrl" /> -->
-        <ModelItem :modelUrl="pointerUrl" />
+        <!-- <ModelItem :modelUrl="pillarUrl" /> -->
-        <ModelItem :modelUrl="quadUrl" />
+        <!-- <ModelItem :modelUrl="pointerUrl" /> -->
-        <ModelItem :modelUrl="walkbayUrl" />
+        <!-- <ModelItem :modelUrl="quadUrl" /> -->
+        <!-- <ModelItem :modelUrl="walkbayUrl" /> -->
 
         <!-- <primitive :object="groundModel" /> -->
         <!-- <primitive :object="skyModel" /> -->

front/src/vite-env.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="vite/client" />
 declare module "*.fbx";
 declare module "*.gltf";
+declare module '*.glb' {
+    const src: string
+    export default src
+}
 declare module "*.hdr";

front/vite.config.ts

@@ -29,5 +29,5 @@ export default defineConfig({
       ]
     })
   ],
-  assetsInclude: ['**/*.fbx', '**/*.gltf', '**/*.hdr'],
+  assetsInclude: ['**/*.fbx','**/*.glb', '**/*.gltf', '**/*.hdr'],
 })