front/src/components/Promo/env.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue';
 
-import { PMREMGenerator } from 'three';
+import { EquirectangularReflectionMapping, ReinhardToneMapping } from 'three';
 import { GainMapLoader } from '@monogrid/gainmap-js'
 import { useTresContext } from '@tresjs/core';
 
@@ -13,9 +13,6 @@ const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json'])
 
 const { renderer, scene } = useTresContext()
 const loadEnv = async () => {
-    const pmremGenerator = new PMREMGenerator(renderer.value);
-    pmremGenerator.compileEquirectangularShader();
-
     const loader = new GainMapLoader(renderer.value)
     const result = await loader.loadAsync([
         props.hdr_webp || hdr_webp,
@@ -23,13 +20,12 @@ const loadEnv = async () => {
         props.hdr_json || hdr_json,
     ])
 
-    const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
-    const exrBackground = exrCubeRenderTarget.texture;
-    const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
-    scene.value.environment = newEnvMap
-    scene.value.background = exrBackground
+    scene.value.environment = result.renderTarget.texture
+    scene.value.background = result.renderTarget.texture
+    scene.value.background.mapping = EquirectangularReflectionMapping
     result.renderTarget.texture.dispose();
 }
+renderer.value.toneMapping = ReinhardToneMapping
 onMounted(async () => {
     loadEnv()
 })

front/src/components/Promo/load_models.vue

@@ -40,13 +40,12 @@ const loadModels = async () => {
     const data = raw_data.elements
     if (!controls.value) return;
 
+    camera.value?.position.set(1, 1, 1);
     controls.value.enabled = false;
     (controls.value as any).minDistance = raw_data.min_distance;
     (controls.value as any).maxDistance = raw_data.max_distance;
     (controls.value as any)._needsUpdate = true;
-    (controls.value as any).update(1)
-    camera.value?.position.set(1, 1, 1);
-    camera.value?.lookAt(new Vector3(1, 1, 1));
+    (controls.value as any).update()
 
     const sidebar_items = []
     clickable_items.value = []
@@ -146,9 +145,8 @@ watch(() => props.source, () => {
 const { onLoop } = useRenderLoop()
 onLoop(() => {
     clickable_items.value.map(el => {
-        if (camera.value) {
+            el.rotation.x += 0.01
             // el.quaternion.copy(camera.value.quaternion);
-        }
     })
 })
 </script>

front/src/components/Promo/main.vue

@@ -32,6 +32,7 @@ const camera = ref()
 const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
 
 const controlsState = reactive({
+    enableDamping:false,
     maxPolarAngle: (Math.PI / 2) - 0.05,
     minAzimuthAngle: (Math.PI / 2) - 0.02,
 })