89 lines
3.0 KiB
Vue
89 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, render, watch } from 'vue';
|
|
|
|
import { ACESFilmicToneMapping, CanvasTexture, Color, Fog, PMREMGenerator, SRGBColorSpace } 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'
|
|
import { IMAGE_URL, PROMOBG } from '../../constants';
|
|
|
|
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 }
|
|
|
|
renderer.value.outputColorSpace = SRGBColorSpace;
|
|
renderer.value.toneMapping = ACESFilmicToneMapping;
|
|
renderer.value.toneMappingExposure = 1.25;
|
|
renderer.value.setPixelRatio((window.devicePixelRatio || 1) * 2)
|
|
|
|
const pmremGenerator = new PMREMGenerator(renderer.value);
|
|
pmremGenerator.compileEquirectangularShader();
|
|
|
|
const loadEnv = async () => {
|
|
try {
|
|
const loader = new GainMapLoader(renderer.value)
|
|
const result = await loader.loadAsync([
|
|
props.hdr_webp ? `${IMAGE_URL}/${props.hdr_webp}` : hdr_webp,
|
|
props.hdr_gainmap ? `${IMAGE_URL}/${props.hdr_gainmap}` : hdr_gainmap,
|
|
props.hdr_json ? `${IMAGE_URL}/${props.hdr_json}` : hdr_json,
|
|
])
|
|
|
|
const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(result.renderTarget.texture);
|
|
const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
|
|
|
|
// scene.value.environment = newEnvMap
|
|
// scene.value.environmentIntensity = 1
|
|
|
|
result.renderTarget.texture.dispose();
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
|
|
const c = new Color()
|
|
c.set(props.clear_color || PROMOBG)
|
|
// renderer.value.setClearColor(c)
|
|
// 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.colorSpace = SRGBColorSpace
|
|
texture.needsUpdate = true
|
|
scene.value.background = texture
|
|
texture.dispose()
|
|
console.log(canvas.toDataURL())
|
|
}
|
|
}
|
|
|
|
loadEnv()
|
|
|
|
watch(() => props, () => {
|
|
loadEnv()
|
|
}, { deep: true })
|
|
</script>
|
|
<template></template> |