front/src/components/Promo/env.vue

@@ -23,6 +23,7 @@ const loadEnv = async () => {
     scene.value.environment = result.renderTarget.texture
     scene.value.background = result.renderTarget.texture
     scene.value.background.mapping = EquirectangularReflectionMapping
+    // scene.value.backgroundBlurriness = 0.15
     result.renderTarget.texture.dispose();
 }
 renderer.value.toneMapping = ReinhardToneMapping

front/src/components/Promo/load_models.vue

@@ -26,10 +26,14 @@ const clickable_items = ref<any[]>([])
 const clickable_refs = ref<any[]>([])
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene()
-const { controls, camera, scene, raycaster } = useTresContext()
+const { renderer, controls, camera, scene, raycaster } = useTresContext()
 const { seekByName, seekAllByName } = useSeek()
 const envVars = reactive({}) as { hdr_gainmap?: string, hdr_json?: string, hdr_webp?: string }
 
+// renderer.value.capabilities.maxTextures = 4
+// renderer.value.capabilities.maxTextureSize = 512
+// renderer.value.capabilities.precision = 'lowp'
+
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
     const raw_data = await res.json() as scene3D
@@ -68,7 +72,7 @@ const loadModels = async () => {
         clickable.value.push(...clickable_areas)
     }
     sidebar_scene.setData(sidebar_items)
-    sidebar.open()
+    // sidebar.open()
 
     for (let index = 0; index < clickable.value.length; index++) {
         const element = clickable.value[index];
@@ -121,13 +125,18 @@ const loadModels = async () => {
 
     controls.value.enabled = true;
     props.loaded()
+    console.log("Number of Triangles :", renderer.value.info.render.triangles);
+    console.log("render.calls ", renderer.value.info.render.calls);
+
 }
 
 const { onLoop } = useRenderLoop()
 onLoop(() => {
     clickable_refs.value.map(el => {
         // el.quaternion.copy(camera.value?.quaternion);
+        if (el.value[0]) {
             el.value[0].lookAt(camera.value?.position)
+        }
     })
 })
 
@@ -156,7 +165,13 @@ watch(() => props.source, () => {
     loadModels()
 })
 
-onMounted(() => { document.addEventListener('click', clickEvent) })
+onMounted(() => {
+    document.addEventListener('click', clickEvent)
+    console.log(sidebar.is_open)
+    if (sidebar.is_open) {
+        sidebar.close()
+    }
+})
 onUnmounted(() => { document.removeEventListener('click', clickEvent) })
 const pointer = reactive({ x: 0, y: 0 })
 const clickEvent = (event: MouseEvent) => {

front/src/components/Promo/main.vue

@@ -57,7 +57,7 @@ watch(() => route.params.target, () => {
 <template>
     <div>
         <div :class="[{ 'loading': !models_loading }, 'canvas-wrapper']">
-            <TresCanvas shadows window-size>
+            <TresCanvas window-size :alpha="false" :antialias="false" :stencil="false" power-preference="high-performance" precision="lowp">
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>