add model

components/model/env.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import {
+    PCFSoftShadowMap,
+    CineonToneMapping,
+    PMREMGenerator,
+} from 'three';
+
+import { GainMapLoader, } from '@monogrid/gainmap-js'
+
+const { scene, renderer, camera } = useTresContext()
+
+renderer.value.toneMapping = CineonToneMapping
+renderer.value.toneMappingExposure = 1
+
+renderer.value.shadowMap.enabled = true
+renderer.value.shadowMap.type = PCFSoftShadowMap
+
+const pmremGenerator = new PMREMGenerator(renderer.value);
+pmremGenerator.compileEquirectangularShader();
+
+onMounted(async () => {
+    const loader = new GainMapLoader(renderer.value)
+    const result = await loader.loadAsync([
+        'hdrmaps/hdr.webp',
+        'hdrmaps/hdr-gainmap.webp',
+        'hdrmaps/hdr.json',
+    ])
+    if (renderer.value && camera.value) {
+        renderer.value.render(scene.value, camera.value)
+    }
+    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
+    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
+
+    scene.value.environment = newEnvMap
+    scene.value.environmentIntensity = 1.25
+    scene.value.environmentRotation.z = 0.25
+    result.renderTarget.texture.dispose();
+})
+</script>
+<template></template>

components/model/item.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { Vector3 } from 'three';
+const props = defineProps(['model', 'position', 'target'])
+
+const scene = props.model
+scene.receiveShadow = true
+scene.castShadow = true
+
+const target = ref(props.target ? new Vector3(...props.target) : null)
+
+const model = ref()
+const { onLoop } = useRenderLoop()
+
+let stepbase = 0.005
+const axis = [
+    { axis: 'x', func: 'translateX', },
+    { axis: 'y', func: 'translateY', },
+    { axis: 'z', func: 'translateZ', },
+]
+type vectorType = 'x' | 'y' | 'z';
+
+watch(props, () => {
+    if (props.target) {
+        target.value = new Vector3(...props.target)
+    }
+}, { deep: true })
+</script>
+<template>
+    <TresGroup ref="model" :position="(props.position || [0, 0, 0])">
+        <template v-if="scene.children[0].type == 'Group'">
+            <TresObject3D v-for="item in scene.children[0].children" v-bind="item" />
+        </template>
+        <template v-else>
+            <TresObject3D v-for="item in (scene.children)" v-bind="item" />
+        </template>
+    </TresGroup>
+</template>

components/model/scene.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Vector3 } from 'three'
+
+const types = {
+  small: defineAsyncComponent(() => import('./small.vue')) 
+}
+
+const props = defineProps({
+  type: {
+    type: String as PropType<keyof typeof types>,
+    default: 'small',
+    required: true,
+  }
+})
+
+const camera = ref()
+const controls = ref()
+
+const controlsState = reactive({
+  minDistance: 2,
+  maxDistance: 10,
+  enablePan: false,
+  // enableZoom: false,
+  maxPolarAngle: Math.PI / 2 - 0.2
+})
+</script>
+
+<template>
+  <div class="relative h-[600px] max-h-screen">
+    <ClientOnly fallback-tag="div">
+      <template #fallback>
+        <div class="fallback">Загрузка 3D модели</div>
+      </template>
+      <TresCanvas height="600">
+        <TresPerspectiveCamera :position="new Vector3(-7, 2, 4)" ref="camera" />
+        <OrbitControls v-bind="controlsState" ref="controls" make-default />
+        <ModelEnv />
+        <Suspense>
+          <component :is="types[props.type]" />
+        </Suspense>
+      </TresCanvas>
+    </ClientOnly>
+  </div>
+</template>

components/model/small.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+//@ts-ignore
+import { useGLTF } from '@tresjs/cientos'
+import { Vector3 } from 'three';
+
+const { scene: bench1 } = await useGLTF('/models/bench_export-v1.glb')
+</script>
+<template>
+  <Suspense>
+    <TresGroup :position-y="0" :scale="new Vector3(2, 2, 2)">
+      <ModelItem :model="bench1" :target="[0, 0, 0]" />
+    </TresGroup>
+  </Suspense>
+</template>

nuxt.config.ts

@@ -61,10 +61,5 @@ export default defineNuxtConfig({
 
   site: { indexable: false },
 
-  robots: {
-    UserAgent: "*",
-    Disallow: "",
-  },
-
   compatibilityDate: '2025-03-12'
 })

package-lock.json

@@ -32,7 +32,8 @@
         "vue-router": "^4.3.2"
       },
       "devDependencies": {
-        "@types/imagemin": "^9.0.0"
+        "@types/imagemin": "^9.0.0",
+        "@types/three": "^0.174.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -4076,9 +4077,10 @@
       }
     },
     "node_modules/@tweenjs/tween.js": {
-      "version": "23.1.2",
+      "version": "23.1.3",
-      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
-      "integrity": "sha512-kMCNaZCJugWI86xiEHaY338CU5JpD0B97p1j1IKNn/Zto8PgACjQx0UxbHjmOcLl/dDOBnItwD07KmCs75pxtQ=="
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
     },
     "node_modules/@tybys/wasm-util": {
       "version": "0.9.0",
@@ -4178,6 +4180,21 @@
       "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
       "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ=="
     },
+    "node_modules/@types/three": {
+      "version": "0.174.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.174.0.tgz",
+      "integrity": "sha512-De/+vZnfg2aVWNiuy1Ldu+n2ydgw1osinmiZTAn0necE++eOfsygL8JpZgFjR2uHmAPo89MkxBj3JJ+2BMe+Uw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
@@ -5396,6 +5413,13 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.55",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.55.tgz",
+      "integrity": "sha512-p97I8XEC1h04esklFqyIH+UhFrUcj8/1/vBWgc6lAK4jMJc+KbhUy8D4dquHYztFj6pHLqGcp/P1xvBBF4r3DA==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -13141,7 +13165,8 @@
     "node_modules/three": {
       "version": "0.165.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.165.0.tgz",
-      "integrity": "sha512-cc96IlVYGydeceu0e5xq70H8/yoVT/tXBxV/W8A/U6uOq7DXc4/s1Mkmnu6SqoYGhSRWWYFOhVwvq6V0VtbplA=="
+      "integrity": "sha512-cc96IlVYGydeceu0e5xq70H8/yoVT/tXBxV/W8A/U6uOq7DXc4/s1Mkmnu6SqoYGhSRWWYFOhVwvq6V0VtbplA==",
+      "license": "MIT"
     },
     "node_modules/three-custom-shader-material": {
       "version": "5.4.0",

package.json

@@ -35,6 +35,7 @@
     "vue-router": "^4.3.2"
   },
   "devDependencies": {
-    "@types/imagemin": "^9.0.0"
+    "@types/imagemin": "^9.0.0",
+    "@types/three": "^0.174.0"
   }
 }

pages/index.vue

@@ -72,8 +72,7 @@ const delivery = computed(() => pages.value.find(el => el.slug == 'delivery')?.c
                 <div class="siteblock bg-white" :id="page.slug">
                     <div class="container gap-4">
                         <div class="col-span-full xl:col-span-8">
-                            <!-- <ExpDiagram /> -->
+                            <ModelScene />
-                            ТУТ БУДЕТ КАРТИНКА
                         </div>
                         <div class="col-span-full xl:col-span-4 prose">
                             <span v-html="marked.parse(page.content || '')"></span>

public/hdrmaps/hdr.json

@@ -0,0 +1,29 @@
+{
+  "gainMapMax": [
+    5.336506559810254,
+    5.336506559810254,
+    5.336506559810254
+  ],
+  "gainMapMin": [
+    0,
+    0,
+    0
+  ],
+  "gamma": [
+    1,
+    1,
+    1
+  ],
+  "hdrCapacityMax": 5.336506559810254,
+  "hdrCapacityMin": 0,
+  "offsetHdr": [
+    0.015625,
+    0.015625,
+    0.015625
+  ],
+  "offsetSdr": [
+    0.015625,
+    0.015625,
+    0.015625
+  ]
+}