fence lines
This commit is contained in:
parent
6a25442c19
commit
9c0dca4946
|
|
@ -12,12 +12,12 @@ const max_size = use_max_size()
|
|||
|
||||
const controlsState = reactive({
|
||||
distance: section_count.value,
|
||||
minDistance: 10,
|
||||
maxDistance: 10,
|
||||
minDistance: 20,
|
||||
maxDistance: 20,
|
||||
position: { x: 0, y: 0, z: 0 },
|
||||
enablePan: false,
|
||||
minPolarAngle: degToRad(30),
|
||||
maxPolarAngle: degToRad(90),
|
||||
maxPolarAngle: degToRad(80),
|
||||
})
|
||||
const cameraStat = reactive({
|
||||
position: [-4, 2, 8],
|
||||
|
|
@ -53,7 +53,7 @@ watch([section_count, extra_section], () => {
|
|||
let v = (section_count.value + ~~(!!extra_section.value)) * 2
|
||||
if (v < controlsState.minDistance) v = controlsState.minDistance;
|
||||
if (v > controlsState.maxDistance) v = controlsState.maxDistance;
|
||||
(camera.value as any).position.normalize().multiplyScalar(v)
|
||||
// (camera.value as any).position.normalize().multiplyScalar(v)
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -68,12 +68,12 @@ watch([section_count, extra_section], () => {
|
|||
<TresCanvas clear-color="#ccc">
|
||||
<TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
|
||||
<OrbitControls v-bind="controlsState" make-default />
|
||||
<TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">
|
||||
<TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1">
|
||||
<Suspense>
|
||||
<ModelParametric />
|
||||
</Suspense>
|
||||
</TresGroup>
|
||||
<TresMesh receive-shadow :position-y="-3.65" name="ground">
|
||||
<TresMesh receive-shadow name="ground">
|
||||
<TresCircleGeometry :args="[50, 32]" :rotate-x="-Math.PI * 0.5" />
|
||||
<TresShadowMaterial :opacity="0.2" />
|
||||
</TresMesh>
|
||||
|
|
|
|||
|
|
@ -87,26 +87,6 @@ watch([section_count, fence_section, extra_section], () => {
|
|||
pillar_two_pos.value = fence_section.value * 0.5 + pillar_size + bSize - 0.01
|
||||
// translate_to_section.value = make_translate_to_section()
|
||||
}
|
||||
|
||||
if ((section_count.value + ~~(!!extra_section.value)) > 3) {
|
||||
const total = (section_count.value + ~~(!!extra_section.value))
|
||||
const size = Math.ceil(total / 4)
|
||||
console.log({ total, size, index: props.index });
|
||||
switch(Math.ceil(props.index / size)) {
|
||||
case 1:
|
||||
console.log('1')
|
||||
break;
|
||||
case 2:
|
||||
console.log('2')
|
||||
break;
|
||||
case 3:
|
||||
console.log('3')
|
||||
break;
|
||||
case 4:
|
||||
console.log('4')
|
||||
break;
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,59 @@
|
|||
<script setup lang="ts">
|
||||
import { Box3, Vector3 } from 'three';
|
||||
import { degToRad } from 'three/src/math/MathUtils.js';
|
||||
|
||||
const props = defineProps(['number', 'count', 'models'])
|
||||
const rotate = () => {
|
||||
switch (props.number) {
|
||||
case 1:
|
||||
return degToRad(0)
|
||||
case 2:
|
||||
return degToRad(90)
|
||||
case 3:
|
||||
return degToRad(180)
|
||||
case 4:
|
||||
return degToRad(270)
|
||||
}
|
||||
}
|
||||
const { seekByName } = useSeek()
|
||||
const { scene } = useTresContext()
|
||||
|
||||
const section_count = use_section_count()
|
||||
const extra_section = use_extra_section()
|
||||
|
||||
const size = ref(new Vector3())
|
||||
const total = ref((section_count.value + ~~(!!extra_section.value)))
|
||||
|
||||
const count_pos = () => {
|
||||
console.log('line count pos')
|
||||
total.value = (section_count.value + ~~(!!extra_section.value))
|
||||
|
||||
const line = seekByName(scene.value, `line_${props.number}`)
|
||||
if (line && line.children.length) {
|
||||
const fence = line.children[0];
|
||||
if (fence) {
|
||||
const box = new Box3();
|
||||
fence.children.forEach(element => {
|
||||
box.expandByObject(element);
|
||||
});
|
||||
box.getSize(size.value)
|
||||
}
|
||||
line.updateMatrixWorld()
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
count_pos()
|
||||
})
|
||||
watch(() => [props.count, section_count.value, extra_section.value],
|
||||
count_pos
|
||||
)
|
||||
</script>
|
||||
<template>
|
||||
<TresGroup :name="`line_${props.number}`">
|
||||
<template v-for="i in props.count">
|
||||
<template v-if="(i + (props.number - 1) * props.count) <= total" :key="(i + (props.number - 1) * props.count)">
|
||||
<ModelFence :index="i + (props.number - 1) * props.count" :models="props.models" />
|
||||
</template>
|
||||
</template>
|
||||
</TresGroup>
|
||||
</template>
|
||||
|
|
@ -12,6 +12,7 @@ import { GainMapLoader, } from '@monogrid/gainmap-js'
|
|||
//@ts-ignore
|
||||
import { useGLTF, } from '@tresjs/cientos'
|
||||
import { getColorHexFromRal, type ralTypes } from '../ral';
|
||||
import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
|
||||
|
||||
const pillar_color = use_pillar_color()
|
||||
const lamelle_color = use_lamelle_color()
|
||||
|
|
@ -91,12 +92,39 @@ watch(pillar_color, () => {
|
|||
set_material(element, getColorHexFromRal(pillar_color.value))
|
||||
})
|
||||
})
|
||||
watch([section_count, extra_section], () => {
|
||||
|
||||
const total = ref((section_count.value + ~~(!!extra_section.value)))
|
||||
const size = ref(Math.ceil(total.value / 4))
|
||||
const count = ref((total.value >= 4) ? size.value : total.value)
|
||||
|
||||
watch(() => [section_count.value, extra_section.value], () => {
|
||||
console.log('parametric line clear')
|
||||
total.value = (section_count.value + ~~(!!extra_section.value))
|
||||
size.value = Math.ceil(total.value / 4);
|
||||
count.value = (total.value >= 4) ? size.value : total.value;
|
||||
|
||||
const lines_count = (total.value >= 4) ? 4 : 1
|
||||
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)]
|
||||
if (base?.children && base.children.length !== lines_count) {
|
||||
base.children = [...base?.children.slice(0, lines_count)]
|
||||
}
|
||||
|
||||
const lines = seekAll(scene.value, 'name', 'line')
|
||||
lines.forEach(line => {
|
||||
let n = size.value
|
||||
if (lines_count == 1) {
|
||||
n = total.value
|
||||
}
|
||||
if (line.name.endsWith('_4')) {
|
||||
n = total.value - size.value * 3
|
||||
if (n < 0) {
|
||||
n = 0
|
||||
}
|
||||
}
|
||||
if (line?.children && n < line?.children.length) {
|
||||
line.children = [...line?.children.slice(0, n)]
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
watch(lamelle_count, () => {
|
||||
|
|
@ -104,30 +132,12 @@ watch(lamelle_count, () => {
|
|||
(el: Ref) => { set_material(el.value, getColorHexFromRal(pillar_color.value), lamelle_count.value) });
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
const loader = new GainMapLoader(renderer.value)
|
||||
const result = await loader.loadAsync([
|
||||
'hdrmaps/hdr.webp',
|
||||
'hdrmaps/hdr-gainmap.webp',
|
||||
'hdrmaps/hdr.json',
|
||||
])
|
||||
if (renderer.value && camera.value) {
|
||||
renderer.value.render(scene.value, camera.value)
|
||||
}
|
||||
// scene.value.environment = result.renderTarget.texture
|
||||
// scene.value.background = result.renderTarget.texture
|
||||
// scene.value.background.mapping = EquirectangularReflectionMapping
|
||||
// scene.value.backgroundRotation = new Euler(0, 10, 0)
|
||||
// scene.value.backgroundIntensity = 1.5
|
||||
// scene.value.backgroundBlurriness = 0.06
|
||||
result.renderTarget.texture.dispose();
|
||||
})
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<TresGroup name="base">
|
||||
<template v-for="i in Math.min((section_count + ~~(!!extra_section)), max_size)">
|
||||
<ModelFence :index="i" :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" />
|
||||
<template v-for="line in (total >= 4) ? 4 : 1" :key="count">
|
||||
<ModelLine :models="{ top, fence, fence_top, fence_bottom, fence_inner, fastening, lamelle }" :number="line"
|
||||
:count="count" :position-z="line * 2" />
|
||||
</template>
|
||||
</TresGroup>
|
||||
</template>
|
||||
Loading…
Reference in New Issue