35 lines
1.2 KiB
Vue
35 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, watch } from 'vue';
|
|
|
|
import { EquirectangularReflectionMapping, ReinhardToneMapping } from 'three';
|
|
import { GainMapLoader } from '@monogrid/gainmap-js'
|
|
import { useTresContext } from '@tresjs/core';
|
|
|
|
import hdr_gainmap from '../../assets/promo/hdr/hdr-gainmap.webp'
|
|
import hdr_json from '../../assets/promo/hdr/hdr.json?url'
|
|
import hdr_webp from '../../assets/promo/hdr/hdr.webp'
|
|
|
|
const props = defineProps(['hdr_webp', 'hdr_gainmap', 'hdr_json'])
|
|
|
|
const { renderer, scene } = useTresContext()
|
|
const loadEnv = async () => {
|
|
const loader = new GainMapLoader(renderer.value)
|
|
const result = await loader.loadAsync([
|
|
props.hdr_webp || hdr_webp,
|
|
props.hdr_gainmap || hdr_gainmap,
|
|
props.hdr_json || hdr_json,
|
|
])
|
|
|
|
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
|
|
onMounted(async () => {
|
|
loadEnv()
|
|
})
|
|
watch(() => props.hdr_webp, loadEnv)
|
|
</script>
|
|
<template></template> |