front/src/components/Promo/env.vue

@@ -18,7 +18,7 @@ const k = { start: 0.5, end: 4.5 }
 renderer.value.outputColorSpace = SRGBColorSpace;
 renderer.value.toneMapping = ACESFilmicToneMapping;
 renderer.value.toneMappingExposure = 1.25;
-renderer.value.setPixelRatio(1.5)
+renderer.value.setPixelRatio((window.devicePixelRatio || 1) * 2)
 
 const loadEnv = async () => {
     // console.log('update env')
@@ -34,7 +34,7 @@ const loadEnv = async () => {
     const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
     const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
 
-    // scene.value.background = result.renderTarget.texture
+    // scene.value.background = exrCubeRenderTarget.texture 
     scene.value.environment = newEnvMap
     scene.value.environmentIntensity = 1
 

front/src/components/Promo/load_models.vue

@@ -4,6 +4,8 @@ import {
     Box3, Color, DoubleSide, Group, Mesh, PlaneGeometry,
     MeshStandardMaterial, MeshStandardMaterialParameters,
     Vector2, Vector3,
+    Object3D,
+    MeshPhongMaterial,
 } from 'three';
 
 import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core';
@@ -110,7 +112,7 @@ const loadModels = async () => {
         let { scene: loaded_scene } = await useGLTF(item.modelUrl)
         item.modelFile = loaded_scene
         item.name = element.name
-
+        
         if (!element.is_enabled) {
             item.modelFile.visible = false
         }
@@ -121,8 +123,10 @@ const loadModels = async () => {
                 item.modelFile.children[0].position.y + element.y_pos,
                 item.modelFile.children[0].position.z + element.z_pos
             )
+            item.modelFile.children[0].updateMatrixWorld(true)
         }
-
+        
+        item.modelFile.updateMatrixWorld(true)
         models.value.push(item)
 
         const res = await fetch(`${SERVER_URL}/api/obj/clickable/?source=${element.id}`)
@@ -187,6 +191,7 @@ const loadModels = async () => {
             point.position.set(world_position.x, p * 3, world_position.z * 2)
             point.name = `${element.id}_clickable`
             point.scale.set(p * 2, p * 2, p * 2)
+            point.material = new MeshPhongMaterial({ emissive: new Color(1, 1, 1), emissiveIntensity: 10 })
             point.updateMatrixWorld()
 
             if (clickable_items.value.find(el => el.name == point.name)) continue
@@ -224,12 +229,12 @@ const loadModels = async () => {
         (controls.value as any).autoRotate = false;
     }
 }
-const lookAtCamera = (obj) => {
+const lookAtCamera = (obj: Group) => {
     if (!obj || !obj.children) {
         return
     }
-    obj.children.forEach(element => {
+    obj.children.forEach((element: Object3D) => {
-        if (element && typeof element.lookAt == 'function') {
+        if (element && typeof element.lookAt == 'function' && camera.value) {
             element.lookAt(obj.position.x, obj.position.y * Math.PI * -0.5, camera.value?.position.z)
         }
     });
@@ -246,19 +251,27 @@ onAfterRender(() => {
     }
 })
 
-let oldObj = [] as { uuid: string, color: Color }[]
-const passShader = (obj: Mesh | Group) => {
-    if (obj instanceof Mesh) {
-        oldObj.push({ uuid: obj.uuid, color: (obj.material as MeshStandardMaterial).color });
-        (obj.material as MeshStandardMaterial).color = new Color(1, 0, 0)
-    } else if (obj instanceof Group) {
-        for (let c in obj.children) {
-            passShader(obj.children[c])
-        }
-    }
-}
 const openSidebar = (id: number) => {
-    sidebar.open(id)
+    sidebar.open(id);
+
+    // const clickable = useClickable()
+    // const target = clickable.list.find(el => el.id == id)
+    // if (!target) return
+    // const el = seekByName(scene.value, target.object_name);
+    // if (el) {
+    //     // (controls.value as any).maxDistance = 10;
+    //     // (controls.value as any).minDistance = 1;
+    //     const target_vector = new Vector3();
+
+    //     el.getWorldPosition(target_vector);
+    //     (controls.value as any).target = target_vector;
+    //     console.log(target_vector)
+
+    //     target_vector.copy( el.position );
+    //     el.localToWorld( target_vector );
+    //     console.log(target_vector)
+    //     // (camera.value as any).lookAt(el)
+    // }
 }
 
 loadModels()

front/src/components/Promo/main.vue

@@ -69,7 +69,7 @@ const sidebarFunc = () => {
 <template>
     <div>
         <div v-if="models_loading"
-            style="position: absolute;    z-index: 10;    font-size: 6rem;    top: 50%;    left: 50%;    transform: translate3d(-50%, -50%, 0);">
+            style="position: absolute;z-index: 10;font-size: 6rem;text-align: center;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);">
             {{loading_store.getStatus()}}
         </div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">