front/src/assets/main.scss

@@ -54,9 +54,8 @@ a[href] {
 
     &-canvas {
         flex-grow: 1;
-        height: 50vh;
-        width: 100vw;
-        max-height: 65vh;
+        height: 100vh;
+        z-index: -1;
     }
 }
 

front/src/components/Main/index.vue

@@ -17,12 +17,12 @@ const controls = ref()
 
 const controlsState = reactive({
     enableDamping: true,
-    minPolarAngle: 45 * (Math.PI / 180),
-    maxPolarAngle: 45 * (Math.PI / 180),
+    minPolarAngle: 66 * (Math.PI / 180),
+    maxPolarAngle: 66 * (Math.PI / 180),
     // minAzimuthAngle: (Math.PI / 2) / 2,
     enablePan: false,
     enableZoom: false,
-    autoRotate: true,
+    // autoRotate: true,
 })
 await pageStore.load(route.params)
 await raw_dataStore.load({ source: pageStore.page.scene_3d })
@@ -42,7 +42,7 @@ onMounted(async () => {
             </p>
         </div>
         <div class="main-canvas">
-            <TresCanvas :output-encoding="SRGBColorSpace" >
+            <TresCanvas window-size :output-encoding="SRGBColorSpace" >
                 <TresPerspectiveCamera ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default ref="controls" />
                 <MainLoadModels v-if="raw_dataStore.data.id" />

front/src/components/Main/main_load_models.vue

@@ -50,8 +50,8 @@ const cameraSet = () => {
         (controls.value as any).update()
     }
     if (camera.value) {
-        const d = raw_dataStore.data.max_distance * 0.5;
-        camera.value.position.set(d * 0.25, d * 0.5, d);
+        const d = raw_dataStore.data.max_distance * 0.75;
+        camera.value.position.set(d * 0.25, d, d);
         camera.value.updateMatrixWorld()
     }
 }
@@ -59,7 +59,9 @@ loadModels()
 cameraSet()
 const { onAfterRender } = useLoop()
 onAfterRender(() => {
-    (controls.value as any).update()
+    if (controls.value) {
+        (controls.value as any).update()
+    }
 })
 </script>
 <template>

front/src/components/Promo/env.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, render, watch } from 'vue';
 
-import { ACESFilmicToneMapping, Color, Fog, PMREMGenerator, SRGBColorSpace } from 'three';
+import { ACESFilmicToneMapping, CanvasTexture, Color, Fog, PMREMGenerator, SRGBColorSpace } from 'three';
 import { GainMapLoader } from '@monogrid/gainmap-js'
 import { useTresContext } from '@tresjs/core';
 
@@ -10,7 +10,11 @@ import hdr_json from '../../assets/promo/hdr/hdr.json?url'
 import hdr_webp from '../../assets/promo/hdr/hdr.webp'
 import { IMAGE_URL, PROMOBG } from '../../constants';
 
-const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json', 'env_displacementmap', 'env_normalmap', 'clear_color', 'focus'])
+const props = defineProps([
+    'hdr_webp', 'hdr_gainmap', 'hdr_json',
+    'clear_color', 'clear_color_to',
+    'focus'
+])
 const { renderer, scene } = useTresContext()
 
 const k = { start: 0.5, end: 4.5 }
@@ -20,7 +24,6 @@ renderer.value.toneMapping = ACESFilmicToneMapping;
 renderer.value.toneMappingExposure = 1.25;
 renderer.value.setPixelRatio((window.devicePixelRatio || 1) * 2)
 
-const type = 'canvas'
 const loadEnv = async () => {
     try {
         const loader = new GainMapLoader(renderer.value)
@@ -50,6 +53,29 @@ const loadEnv = async () => {
     scene.value.fog = new Fog(c, props.focus * k.start, props.focus * k.end)
 
     document.documentElement.style.setProperty('--primary-color', props.clear_color)
+
+    if (props.clear_color_to) {
+        const c_to = new Color()
+        c_to.set(props.clear_color_to)
+
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const s = 100
+        canvas.width = s;
+        canvas.height = s;
+        if (ctx instanceof CanvasRenderingContext2D) {
+            const grad = ctx.createLinearGradient(0, 0, 0, s);
+            grad.addColorStop(0, props.clear_color);
+            grad.addColorStop(1, props.clear_color_to);
+            console.log(props.clear_color, props.clear_color_to)
+            ctx.fillStyle = grad;
+            ctx.fillRect(0, 0, s, s);
+        }
+        const texture = new CanvasTexture(canvas)
+        texture.needsUpdate = true
+        scene.value.background = texture
+        console.log(canvas.toDataURL())
+    }
 }
 
 loadEnv()