119 lines
4.1 KiB
Vue
119 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
ReinhardToneMapping, PCFSoftShadowMap,
|
|
PMREMGenerator, Euler,
|
|
MeshStandardMaterial,
|
|
Color,
|
|
} from 'three';
|
|
import { EXRLoader } from 'three/examples/jsm/Addons.js';
|
|
import { useGLTF, } from '@tresjs/cientos'
|
|
import { getColorHexFromRal, type ralTypes } from '../ral';
|
|
|
|
const pillar_color = use_pillar_color()
|
|
const lamelle_color = use_lamelle_color()
|
|
const section_count = use_section_count()
|
|
const extra_section = use_extra_section()
|
|
const max_size = use_max_size()
|
|
|
|
const { scene, renderer } = useTresContext()
|
|
renderer.value.toneMapping = ReinhardToneMapping
|
|
|
|
renderer.value.shadowMap.enabled = true
|
|
renderer.value.shadowMap.type = PCFSoftShadowMap
|
|
|
|
const { scene: top } = await useGLTF('/models_one/verh_100.glb', { draco: true })
|
|
const { scene: fence } = await useGLTF('/models_one/fence.glb', { draco: true })
|
|
const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb', { draco: true })
|
|
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb', { draco: true })
|
|
|
|
function set_material(scene: any, material: any) {
|
|
scene.children.forEach((el: any) => {
|
|
if (el.isMesh) {
|
|
el.castShadow = true
|
|
el.receiveShadow = true
|
|
}
|
|
if (el.material) el.material = material
|
|
set_material(el, material)
|
|
})
|
|
}
|
|
const lcolor = getColorHexFromRal(lamelle_color.value)
|
|
const lamelle_material = new MeshStandardMaterial({
|
|
color: new Color(lcolor || '#9c9c9c'),
|
|
transparent: true,
|
|
opacity: 1,
|
|
roughness: 0.3,
|
|
metalness: 0.3
|
|
})
|
|
const pcolor = getColorHexFromRal(pillar_color.value)
|
|
const pillar_material = new MeshStandardMaterial({
|
|
color: new Color(pcolor || '#eee'),
|
|
transparent: true,
|
|
opacity: 1,
|
|
roughness: 0.3,
|
|
metalness: 0.3
|
|
})
|
|
set_material(lamelle, lamelle_material);
|
|
|
|
[top, fence, fastening].map((el: any) => {
|
|
set_material(el, pillar_material)
|
|
})
|
|
const { seek, seekAll } = useSeek()
|
|
watch(lamelle_color, () => {
|
|
const items = seekAll(scene.value, 'name', "lamelles")
|
|
const m = lamelle_material
|
|
const mcolor = getColorHexFromRal(lamelle_color.value as ralTypes)
|
|
if (mcolor) m.color = new Color(mcolor)
|
|
items.forEach(element => {
|
|
set_material(element, m)
|
|
});
|
|
})
|
|
watch(pillar_color, () => {
|
|
const items = [
|
|
...seekAll(scene.value, 'name', "pillar_one"),
|
|
...seekAll(scene.value, 'name', "pillar_two"),
|
|
...seekAll(scene.value, 'name', "lam_fastening_one"),
|
|
...seekAll(scene.value, 'name', "lam_fastening_two"),
|
|
...seekAll(scene.value, 'name', "top_section"),
|
|
]
|
|
const m = pillar_material
|
|
const mcolor = getColorHexFromRal(pillar_color.value as ralTypes)
|
|
if (mcolor) m.color = new Color(mcolor)
|
|
items.forEach(element => {
|
|
set_material(element, m)
|
|
});
|
|
})
|
|
watch([section_count, extra_section], () => {
|
|
const base = seek(scene.value, 'name', 'base')
|
|
const n = (section_count.value as number) + ~~(!!extra_section.value)
|
|
if (base?.children && n < base?.children.length) {
|
|
base.children = [...base?.children.slice(0, n)]
|
|
}
|
|
})
|
|
|
|
const pmremGenerator = new PMREMGenerator(renderer.value);
|
|
pmremGenerator.compileEquirectangularShader();
|
|
onMounted(() => {
|
|
new EXRLoader()
|
|
.load('/hdrmaps/kloppenheim_06_4k.exr', function (texture) {
|
|
const exrCubeRenderTarget = pmremGenerator.fromEquirectangular(texture);
|
|
const exrBackground = exrCubeRenderTarget.texture;
|
|
const newEnvMap = exrCubeRenderTarget ? exrCubeRenderTarget.texture : null;
|
|
|
|
scene.value.environment = newEnvMap
|
|
scene.value.background = exrBackground
|
|
scene.value.backgroundRotation = new Euler(0, 5, 0)
|
|
texture.dispose();
|
|
});
|
|
})
|
|
|
|
</script>
|
|
<template>
|
|
<TresGroup name="base">
|
|
<template v-for="i in (section_count + ~~(!!extra_section))">
|
|
<template v-if="i <= max_size">
|
|
<ModelFence :index="i"
|
|
:models="{ top: top.clone(), fence: fence.clone(), fastening: fastening.clone(), lamelle }" />
|
|
</template>
|
|
</template>
|
|
</TresGroup>
|
|
</template> |