front/components.d.ts

@@ -19,7 +19,6 @@ declare module 'vue' {
     IMdiVideo3d: typeof import('~icons/mdi/video3d')['default']
     Item: typeof import('./src/components/Floorplan/item.vue')['default']
     Main: typeof import('./src/components/Promo/main.vue')['default']
-    Model: typeof import('./src/components/Promo/model.vue')['default']
     ModelItem: typeof import('./src/components/Promo/modelItem.vue')['default']
     Models: typeof import('./src/components/Promo/models.vue')['default']
     Projects: typeof import('./src/components/Projects.vue')['default']

front/src/components/Promo/main.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { reactive, } from 'vue';
+import { reactive, ref, shallowReactive, } from 'vue';
-import { TresCanvas } from '@tresjs/core';
-import { CameraControls, useProgress } from '@tresjs/cientos'
 import { Vector3 } from 'three';
+import { TresCanvas } from '@tresjs/core';
+import { Fbo, CameraControls, Environment, useProgress } from '@tresjs/cientos'
+
+import sunset from '../../assets/promo/models/sunset.hdr'
+console.log(sunset)
 
 const minPan = new Vector3(-10, 1, -5);
 const maxPan = new Vector3(5, 1, 5);
@@ -26,6 +29,7 @@ const controlsState = reactive({
     minZoom: 0.2,
 })
 
+
 const { hasFinishLoading, progress } = await useProgress()
 
 </script>
@@ -37,10 +41,12 @@ const { hasFinishLoading, progress } = await useProgress()
         <TresCanvas window-size alpha shadows clear-color="#87ceeb">
             <TresPerspectiveCamera :position="cameraPosition" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />
+
+            <TresGridHelper :args="[50, 50]" />
             <Suspense>
                 <Models />
             </Suspense>
-            <TresDirectionalLight :position="lightPosition" :intensity="5" />
+            <TresDirectionalLight :position="lightPosition" :intensity="5" cast-shadow />
             <TresAmbientLight />
         </TresCanvas>
     </div>

front/src/components/Promo/modelItem.vue

@@ -11,15 +11,16 @@ box.getCenter(center)
 let size = new Vector3();
 box.getSize(size)
 
-const show_alert= ()=>{
+const box_size = [size.x - 0.1, size.y - 0.1, size.z - 0.1]
+
+const show_alert = () => {
     alert(props.modelUrl)
 }
 </script>
 <template>
     <TresGroup :posiion="[0, 0, 0]">
-        <TresMesh :position="center"
+        <TresMesh :position="center" @click="show_alert">
-            @click="show_alert">
+            <TresBoxGeometry :args="box_size" />
-            <TresBoxGeometry :args="size" />
             <TresMeshBasicMaterial :opacity="0" :transparent="true" />
         </TresMesh>
         <TresMesh>

front/src/components/Promo/models.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useFBX, } from '@tresjs/cientos'
-
+import { Environment } from '@tresjs/cientos'
 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'
@@ -10,21 +10,30 @@ import quadUrl from '../../assets/promo/models/quadro/quad.fbx'
 import skyUrl from '../../assets/promo/models/quadro/sky.fbx'
 import walkbayUrl from '../../assets/promo/models/quadro/walkway.fbx'
 
-const quadModel = await useFBX(quadUrl)
+import hdrmap from "../../assets/promo/models/sunset.hdr"
-const groundModel = await useFBX(groundUrl)
-const skyModel = await useFBX(skyUrl)
 
+const groundModel = await useFBX(groundUrl)
+
+console.log(groundModel.children[0].material)
 </script>
 <template>
     <TresGroup>
+        <Suspense>
+            <Environment background :files="hdrmap" />
+        </Suspense>
+        <TresMesh :rotate-x="-Math.PI * 0.5">
+            <TresPlaneGeometry :args="[50, 50]" />
+            <TresMeshPhongMaterial v-bind="groundModel.children[0].material" />
+        </TresMesh>
+
         <ModelItem :modelUrl="andreyUrl" />
         <ModelItem :modelUrl="mangalUrl" />
         <ModelItem :modelUrl="pillarUrl" />
         <ModelItem :modelUrl="pointerUrl" />
-        <!-- <primitive :object="quadModel" /> -->
+        <ModelItem :modelUrl="quadUrl" />
         <ModelItem :modelUrl="walkbayUrl" />
 
         <!-- <primitive :object="groundModel" /> -->
-        <primitive :object="skyModel" />
+        <!-- <primitive :object="skyModel" /> -->
     </TresGroup>
 </template>

front/src/vite-env.d.ts

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

front/vite.config.ts

@@ -20,14 +20,6 @@ export default defineConfig({
     }),
     Icons(),
     svgLoader(),
-    viteStaticCopy({
-      targets: [
-        {
-          src: 'src/assets/promo/models/quadro/*.jpg',
-          dest: 'assets'
-        }
-      ]
-    })
   ],
-  assetsInclude: ['**/*.fbx', '**/*.gltf'],
+  assetsInclude: ['**/*.fbx', '**/*.gltf', '**/*.hdr'],
 })