components/calc/models.vue

@@ -27,21 +27,18 @@ const cameraStat = reactive({
                 </div>
             </template>
             <Loader />
-            <TresCanvas clear-color="#e2e8f0">
+            <Scene :canvasProps="{ clearColor: '#e2e8f0' }">
                 <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
                 <Suspense>
                     <ModelSmoothCamera />
                 </Suspense>
-                <Suspense>
-                    <ModelEnv />
-                </Suspense>
                 <TresGroup>
                     <Suspense>
                         <ModelParametric />
                     </Suspense>
                 </TresGroup>
-            </TresCanvas>
+            </Scene>
         </ClientOnly>
     </div>
 </template>

components/expDiagram.vue

@@ -17,22 +17,6 @@ const explosion_state = use_explosion_state()
 const toggleExpState = () => {
     explosion_state.value = !explosion_state.value
 }
-const back_light = ref()
-const secondary_light = ref()
-const loadAll = async () => {
-    const { scene: back } = await useGLTF('/models_light/back_exp.glb')
-    const { scene: secondary } = await useGLTF('/models_light/secondary_exp.glb')
-
-    const k = 0.03
-
-    back_light.value = back.children[0]
-    back_light.value.intensity = back_light.value.intensity * k
-    back_light.value.shadow.bias = -0.02
-
-    secondary_light.value = secondary.children[0]
-    secondary_light.value.intensity = secondary_light.value.intensity * k
-    secondary_light.value.shadow.bias = -0.01
-}
 
 const changeDistance = (v = 1) => {
     if (camera.value && controls.value) {
@@ -41,9 +25,6 @@ const changeDistance = (v = 1) => {
         camera.value.position.normalize().multiplyScalar(r)
     }
 }
-onMounted(() => {
-    loadAll()
-})
 </script>
 <template>
     <div class="h-96 relative">
@@ -53,14 +34,11 @@ onMounted(() => {
                     Загрузка 3D модели
                 </div>
             </template>
-            <TresCanvas height="600">
+            <Scene :canvasProps="{ height: '600' }">
                 <TresPerspectiveCamera :position="[-7, 2, 4]" ref="camera" />
                 <OrbitControls v-bind="controlsState" ref="controls" make-default />
-                <ModelEnv />
-                <Suspense>
                 <ModelDiagram />
-                </Suspense>
-            </TresCanvas>
+            </Scene>
         </ClientOnly>
         <div class="canvas-icons">
             <a href="#" @click.prevent="toggleExpState">

components/model/parametric.vue

@@ -22,6 +22,24 @@ const { seek, seekAll } = useSeek()
 
 const globalFenceType = useGlobalFenceType()
 
+const top = ref(null)
+const pillar_top = ref()
+const pillar_center = ref(null)
+const pillar_bottom = ref(null)
+const pillar_inner = ref(null)
+const pillar_brace = ref(null)
+const fastening_top = ref(null)
+const fastening_side = ref(null)
+const fixing = ref(null)
+const lamelle = ref(null)
+
+const total = ref(0)
+const size = ref(0)
+const count = ref(0)
+
+const min_for_square = 12;
+
+const loadAll = async () => {
     const topper_models = {
         baseToppers: {} as { [key: toppersIds]: Object3D },
         aristoToppers: {} as { [key: toppersIds]: Object3D },
@@ -49,16 +67,15 @@ const { scene: top_model } = await useGLTF('/models_one/top_100.glb', { draco: t
     const { scene: lamelle_model_standart } = await useGLTF('/models_one/lamel_100.glb', { draco: true });
     const { scene: lamelle_model_aristo } = await useGLTF('/models_one/lamel_100_aristo.glb', { draco: true });
 
-const top = ref(top_model)
-const pillar_top = ref()
-const pillar_center = ref(model_pillar_center)
-const pillar_bottom = ref(model_pillar_bottom)
-const pillar_inner = ref(model_pillar_inner)
-const pillar_brace = ref(model_pillar_brace)
-const fastening_top = ref(model_fastening_top)
-const fastening_side = ref(model_fastening_side)
-const fixing = ref(model_fixing)
-const lamelle = ref(lamelle_model_standart)
+    top.value = top_model
+    pillar_center.value = model_pillar_center
+    pillar_bottom.value = model_pillar_bottom
+    pillar_inner.value = model_pillar_inner
+    pillar_brace.value = model_pillar_brace
+    fastening_top.value = model_fastening_top
+    fastening_side.value = model_fastening_side
+    fixing.value = model_fixing
+    lamelle.value = lamelle_model_standart
 
     const setPillarTopper = () => {
         let key = 'baseToppers'
@@ -70,9 +87,9 @@ const setPillarTopper = () => {
     setPillarTopper()
     watch(pillar_topper, setPillarTopper)
 
-const total = ref((section_count.value + ~~(!!extra_section.value)))
-const size = ref(Math.ceil(total.value / 4))
-const count = ref((total.value >= 4) ? size.value : total.value)
+    total.value = (section_count.value + ~~(!!extra_section.value))
+    size.value = Math.ceil(total.value / 4)
+    count.value = (total.value >= 4) ? size.value : total.value
 
     watch(() => [section_count.value, extra_section.value], () => {
         total.value = (section_count.value + ~~(!!extra_section.value))
@@ -127,7 +144,6 @@ watch(open_calc, () => {
             setTarget(true)
         }
     })
-const min_for_square = 12;
 
     setTarget()
 
@@ -147,6 +163,8 @@ const setLamelleType = () => {
     }
     setLamelleType()
     watch(() => globalFenceType.value?.id, setLamelleType)
+}
+onMounted(async () => { await loadAll() })
 </script>
 <template>
     <TresGroup name="base">

components/scene.vue

@@ -0,0 +1,55 @@
+<script setup>
+const props = defineProps({
+    canvasProps: {
+        type: Object,
+        default: () => ({}),
+    },
+    cameraProps: {
+        type: Object,
+        default: () => ({}),
+    }
+});
+
+const container = ref(null);
+const isIntersecting = ref(true);
+let observer;
+
+// Вычисляем renderMode на основе видимости
+const renderMode = computed(() => (isIntersecting.value ? 'always' : 'never'));
+const startObserver = () => {
+    observer = new IntersectionObserver(
+        (entries) => {
+            entries.forEach((entry) => {
+                isIntersecting.value = entry.isIntersecting;
+            });
+        },
+        { threshold: 0.1 } // Настройте порог видимости по вашему усмотрению
+    );
+
+    if (container.value) {
+        observer.observe(container.value);
+    }
+}
+onMounted(async () => {
+    await nextTick(); // Ждём завершения рендеринга
+    startObserver(); // Запускаем IntersectionObserver
+});
+
+onBeforeUnmount(() => {
+    if (observer) {
+        observer.disconnect();
+    }
+});
+</script>
+<template>
+    <div ref="container" class="h-full">
+        <Suspense>
+            <TresCanvas v-bind="canvasProps" :render-mode="renderMode" :key="renderMode">
+                <ModelEnv />
+                <Suspense>
+                    <slot />
+                </Suspense>
+            </TresCanvas>
+        </Suspense>
+    </div>
+</template>

nuxt.config.ts

@@ -29,7 +29,7 @@ export default defineNuxtConfig({
   runtimeConfig: {
     public: {
       // apiBase: process.env.mode == 'DEVELOPMENT' ? "http://localhost:8000" : "https://mns.kustarshina.ru/kp",
-      apiBase: process.env.mode == 'DEVELOPMENT' ? "http://mns.dev.kustarshina.ru/kp" : "https://mns.kustarshina.ru/kp",
+      apiBase: process.env.mode == 'DEVELOPMENT' ? "http://mns.dev.kustarshina.ru" : "https://mns.kustarshina.ru/kp",
       // apiBase: 'http://localhost:8000',
       imgBase: 'https://mns.kustarshina.ru',
       baseUrl: '',