diff --git a/components/model/fence.vue b/components/model/fence.vue index fac5ce2..42c3942 100644 --- a/components/model/fence.vue +++ b/components/model/fence.vue @@ -48,30 +48,84 @@ watch([fence_section, extra], () => { }) const instanced_lamelle = shallowRef(); -const instanced_lamelle_geometry = Object.assign(new BufferGeometry, props.models.lamelle.children[0].geometry) -const instanced_lamelle_material = props.models.lamelle.children[0].material const instanced_lamelle_count = 24 -const instanced_v = [instanced_lamelle_geometry, instanced_lamelle_material, instanced_lamelle_count] +const instanced_lamelle_el = [ + Object.assign(new BufferGeometry, props.models.lamelle.children[0].geometry), + props.models.lamelle.children[0].material, + instanced_lamelle_count +] + +const instanced_fixing_one = shallowRef(); +const instanced_fixing_one_el = [ + Object.assign(new BufferGeometry, props.models.fixing.children[0].geometry), + props.models.fixing.children[0].material, + instanced_lamelle_count +] + +const instanced_fixing_two = shallowRef(); +const instanced_fixing_two_el = [ + Object.assign(new BufferGeometry, props.models.fixing.children[0].geometry), + props.models.fixing.children[0].material, + instanced_lamelle_count +] +const lamelleMatrix = (i: number) => { + const scale_x = (((extra.value as number) || fence_section.value) * 10) + const pos_x = pillar_size * 0.5 + const pos_y = (lSize * i) + const pos_z = 0.022 * scale_koef + return new Matrix4().fromArray([ + scale_x, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + pos_x, pos_y, pos_z, 1 + ]) +} +const fixingOneMatrix = (i: number) => { + const pos_x = pillar_one_pos.value + pillar_size * 0.66 + const pos_y = (lSize * i) + 0.01 * scale_koef; + const pos_z = 0.022 * scale_koef + return new Matrix4().fromArray([ + 1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + pos_x, pos_y, pos_z, 1 + ]) +} +const fixingTwoMatrix = (i: number) => { + const pos_x = pillar_two_pos.value - pillar_size * 0.66 + const pos_y = (lSize * i) + 0.01 * scale_koef; + const pos_z = 0.022 * scale_koef + return new Matrix4().fromArray([ + 1, 0, 0, 0, + 0, 1, 0, 0, + 0, 0, 1, 0, + pos_x, pos_y, pos_z, 1 + ]) +} watch([instanced_lamelle, fence_section, extra_section, lamelles_count, extra], () => { + const translationVector = new Vector3(0, 20, 20) for (let i = 0; i < instanced_lamelle_count; i++) { if (instanced_lamelle.value) { - const scale_x = (((extra.value as number) || fence_section.value) * 10) - const pos_x = pillar_size * 0.5 - const pos_y = (lSize * i) - const pos_z = 0.022 * scale_koef - const newmatrix = new Matrix4().fromArray([ - scale_x, 0, 0, 0, - 0, 1, 0, 0, - 0, 0, 1, 0, - pos_x, pos_y, pos_z, 1 - ]) - instanced_lamelle.value.setMatrixAt(i, newmatrix); - + instanced_lamelle.value.setMatrixAt(i, lamelleMatrix(i)); if (i >= lamelles_count.value) { - instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(new Vector3(0, 20, 20))); + instanced_lamelle.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector)); } instanced_lamelle.value.instanceMatrix.needsUpdate = true } + if (instanced_fixing_one.value) { + instanced_fixing_one.value.setMatrixAt(i, fixingOneMatrix(i)); + if (i >= lamelles_count.value) { + instanced_fixing_one.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector)); + } + instanced_fixing_one.value.instanceMatrix.needsUpdate = true + } + if (instanced_fixing_two.value) { + instanced_fixing_two.value.setMatrixAt(i, fixingTwoMatrix(i)); + if (i >= lamelles_count.value) { + instanced_fixing_two.value.setMatrixAt(i, new Matrix4().makeTranslation(translationVector)); + } + instanced_fixing_two.value.instanceMatrix.needsUpdate = true + } } }); @@ -100,7 +154,7 @@ watch(lamelles_count, setBraceCount) const pillar = ref([]) const setPillar = () => { const top = props.models.pillar_top.children[0]; - top.position.setComponent(1, lSize * lamelles_count.value) + top.position.setComponent(1, lSize * lamelles_count.value); const pillar_outer = props.models.pillar_center.children[0]; pillar_outer.scale.setComponent(1, lamelles_count.value); @@ -109,7 +163,7 @@ const setPillar = () => { pillar_inner.scale.setComponent(1, lamelles_count.value); const bottom = props.models.pillar_bottom.children[0]; - bottom.position.setComponent(1, lSize * -1) + bottom.position.setComponent(1, lSize * -1); let arr = [top.clone(), pillar_outer.clone(), pillar_inner.clone(), bottom.clone(),] arr.map(el => { @@ -200,7 +254,9 @@ watch([instanced_lamelle, lamelle_color], setLamellesColor) - + + +