components/calc/models.vue

@@ -15,7 +15,7 @@ const controlsState = reactive({
     enablePan: false,
     enableZoom: false,
     minPolarAngle: degToRad(60),
-    maxPolarAngle: degToRad(90),
+    maxPolarAngle: degToRad(100),
 })
 const cameraStat = reactive({
     position: [0, 0, 5],
@@ -48,7 +48,10 @@ watch(fence_section, () => {
             <Suspense>
                 <ModelCamera />
             </Suspense>
-            <TresGroup :position-y="-0.5">
+            <Suspense>
+                <ModelEnv />
+            </Suspense>
+            <TresGroup>
                 <Suspense>
                     <ModelParametric />
                 </Suspense>

components/model/env.vue

@@ -0,0 +1,36 @@
+<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
+    result.renderTarget.texture.dispose();
+})
+</script>
+<template></template>

components/model/parametric.vue

@@ -19,11 +19,6 @@ const lamelle_count = use_lamelles_count()
 const extra_section = use_extra_section()
 
 const { scene, renderer, camera, controls } = useTresContext()
-renderer.value.toneMapping = CineonToneMapping
-renderer.value.toneMappingExposure = 0.5
-
-renderer.value.shadowMap.enabled = true
-renderer.value.shadowMap.type = PCFSoftShadowMap
 
 const { scene: top_model } = await useGLTF('/models_one/verh_100.glb', { draco: true })
 const { scene: model_fence_top } = await useGLTF('/fence_one/top.glb')
@@ -139,25 +134,6 @@ watch(lamelle_count, () => {
             }
         ) });
 })
-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.5
-    result.renderTarget.texture.dispose();
-})
 
 </script>
 <template>