position
This commit is contained in:
parent
6f925167f2
commit
d7dcbafce7
2
app.vue
2
app.vue
|
|
@ -129,7 +129,9 @@ const { scrollToAnchor, scrollToTop } = useAnchorScroll({
|
|||
</div>
|
||||
<div class="siteblock siteblock_calc bg-white">
|
||||
<CalcValues />
|
||||
<Suspense>
|
||||
<CalcModels />
|
||||
</Suspense>
|
||||
</div>
|
||||
<div class="siteblock bg-white" :id="delivery?.slug" v-if="deliveryText">
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
<script setup lang="ts">
|
||||
import { TresCanvas } from '@tresjs/core'
|
||||
import { OrbitControls, Environment, vLightHelper } from '@tresjs/cientos'
|
||||
import { RepeatWrapping, FrontSide, } from 'three';
|
||||
import { TresCanvas, useTexture } from '@tresjs/core'
|
||||
import { OrbitControls, Environment, useGLTF } from '@tresjs/cientos'
|
||||
|
||||
const section_count = useState<number>('section_count')
|
||||
const fence_section = useState<number>('fence_section')
|
||||
|
||||
const controlsState = reactive({
|
||||
minDistance: 5,
|
||||
maxDistance: 12,
|
||||
enablePan: false,
|
||||
// enableZoom: false,
|
||||
maxPolarAngle: (Math.PI / 2) - 0.2,
|
||||
// maxZoom: 2,
|
||||
// minZoom: 1,
|
||||
})
|
||||
const cameraStat = reactive({
|
||||
position: [-4, 2, 8],
|
||||
|
|
@ -17,8 +18,51 @@ const cameraStat = reactive({
|
|||
fov: 40,
|
||||
})
|
||||
|
||||
const pointLight = ref()
|
||||
|
||||
const groundMaterial = ref({
|
||||
color: "#555",
|
||||
roughness: 0.25,
|
||||
metalness: 0,
|
||||
side: FrontSide
|
||||
})
|
||||
const loadAll = async () => {
|
||||
const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
|
||||
pointLight.value = light.children[2]
|
||||
pointLight.value.color = '#f0dea9'
|
||||
pointLight.value.shadow.camera.near = 50
|
||||
pointLight.value.shadow.bias = -0.001
|
||||
|
||||
const pbrTexture = await useTexture({
|
||||
map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png',
|
||||
displacementMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png',
|
||||
roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png',
|
||||
normalMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png',
|
||||
aoMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png',
|
||||
})
|
||||
const repeat = 10
|
||||
for (const key in pbrTexture) {
|
||||
if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
|
||||
const key_p = key as keyof typeof pbrTexture
|
||||
const element = pbrTexture[key_p]
|
||||
if (element && element.wrapS) {
|
||||
element.wrapS = RepeatWrapping
|
||||
element.wrapT = RepeatWrapping
|
||||
element.repeat.x = repeat
|
||||
element.repeat.y = repeat
|
||||
element.flipY = false
|
||||
}
|
||||
}
|
||||
}
|
||||
groundMaterial.value = Object.assign(groundMaterial.value, {
|
||||
map: pbrTexture.map,
|
||||
displacementMap: pbrTexture.displacementMap,
|
||||
normalMap: pbrTexture.normalMap,
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
cameraStat.aspect = window.innerWidth / 600
|
||||
loadAll()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
|
|
@ -31,9 +75,21 @@ onMounted(() => {
|
|||
<Suspense v-if="false">
|
||||
<Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
|
||||
</Suspense>
|
||||
<TresGroup :position-x="Math.min(section_count, 20) * fence_section * -1" :position-y="-3">
|
||||
<Suspense>
|
||||
<ModelParametric />
|
||||
</Suspense>
|
||||
</TresGroup>
|
||||
<TresMesh receive-shadow :position-y="-3.65" name="ground">
|
||||
<TresCircleGeometry :args="[100, 32]" :rotate-x="-Math.PI * 0.5" />
|
||||
<TresMeshStandardMaterial v-bind="groundMaterial" />
|
||||
</TresMesh>
|
||||
<template v-if="pointLight">
|
||||
<TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.5"
|
||||
:position="Object.values(pointLight.position).map((el: any) => el * 3)" cast-shadow />
|
||||
</template>
|
||||
|
||||
<TresAmbientLight color="rgb(191,231,255)" :intensity="5" />
|
||||
</TresCanvas>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,17 +10,18 @@ const lamelle_color = useState<ralTypes>('lamelle_color', () => '3004')
|
|||
const section_count = useState('section_count', () => 10)
|
||||
const extra_section = useState('extra_section', () => 0)
|
||||
const total_length = useState('total_length', () => (2000 * 8 - 100) * 0.001)
|
||||
const min_length = useState('min_length', () => 1000)
|
||||
|
||||
const parametric = {
|
||||
length: {
|
||||
min: 1000,
|
||||
min: min_length.value,
|
||||
max: 2400,
|
||||
step: 1,
|
||||
},
|
||||
total_length: {
|
||||
min: 1,
|
||||
min: min_length.value * 0.001,
|
||||
max: undefined,
|
||||
step: 0.01,
|
||||
step: 0.5,
|
||||
},
|
||||
height: {
|
||||
min: 675,
|
||||
|
|
@ -92,7 +93,7 @@ const changeParametres = () => {
|
|||
form_state.total_length = parametric.total_length.min
|
||||
form_state.length = parametric.length.min
|
||||
}
|
||||
}, 300)
|
||||
}, 600)
|
||||
|
||||
total_length.value = form_state.total_length
|
||||
lamelles_count.value = lamelles
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ const props = defineProps(['index', 'models'])
|
|||
|
||||
const lamelles_count = useState<number>('lamelles_count')
|
||||
const fence_section = useState<number>('fence_section')
|
||||
const section_count = useState<number>('section_count')
|
||||
const pillar_color = useState<ralTypes>('pillar_color')
|
||||
const lamelle_color = useState<ralTypes>('lamelle_color')
|
||||
const remove_pillar = useState<boolean>('remove_pillar')
|
||||
|
|
@ -27,13 +28,8 @@ const show_pillar_one = ref(props.index == 1)
|
|||
const show_pillar_two = ref(true)
|
||||
|
||||
const make_translate_to_section = () => {
|
||||
let r = ((props.index - 1) / 2) * (fence_section.value + pillar_size + bSize) * scale_koef
|
||||
if (props.index % 2 == 0) {
|
||||
show_pillar_two.value = false
|
||||
show_pillar_one.value = true
|
||||
r += (fence_section.value * 0.5 + bSize) * scale_koef
|
||||
return -1 * r
|
||||
}
|
||||
const one_s = (fence_section.value + pillar_size + bSize)
|
||||
let r = (props.index - 1) * one_s * scale_koef
|
||||
return r
|
||||
}
|
||||
const translate_to_section = ref(make_translate_to_section())
|
||||
|
|
@ -41,6 +37,7 @@ const translate_to_section = ref(make_translate_to_section())
|
|||
watch(fence_section, () => {
|
||||
translate_to_section.value = make_translate_to_section()
|
||||
})
|
||||
|
||||
const s = 512
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = s
|
||||
|
|
@ -51,6 +48,7 @@ ctx.font = "512px serif"
|
|||
ctx.textAlign = "center"
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.fillText(props.index, s * 0.5, s * 0.5)
|
||||
|
||||
const textures = []
|
||||
for (let index = 0; index < lamelles_count.value; index++) {
|
||||
const element = document.createElement('canvas')
|
||||
|
|
@ -61,12 +59,17 @@ for (let index = 0; index < lamelles_count.value; index++) {
|
|||
0, (s / lamelles_count.value) * index, s, s / lamelles_count.value,
|
||||
0, 0, s, s / lamelles_count.value
|
||||
);
|
||||
// console.log(element.toDataURL())
|
||||
textures.push(new CanvasTexture(element))
|
||||
}
|
||||
const fenceRotate = { x: 0, y: 0 }
|
||||
if (props.index > 3) {
|
||||
// fenceRotate.x = -Math.PI * 0.25
|
||||
// fenceRotate.y = -Math.PI * 0.5
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`">
|
||||
<TresGroup :scale="scale_koef" :position-x="translate_to_section" :name="`fence ${index}`" :rotate-y="fenceRotate.y"
|
||||
:rotate-x="fenceRotate.x">
|
||||
<TresGroup name="pillar_one" v-if="!remove_pillar && show_pillar_one" :position-x="pillar_one_pos"
|
||||
:position-z="0">
|
||||
<TresGroup :position-y="(lSize * -0.5)" :scale="[1, 0.5, 1]">
|
||||
|
|
|
|||
|
|
@ -1,80 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
ReinhardToneMapping, PCFSoftShadowMap, RepeatWrapping,
|
||||
Color, DataTexture,
|
||||
ReinhardToneMapping, PCFSoftShadowMap,
|
||||
PMREMGenerator, Euler,
|
||||
FrontSide,
|
||||
CanvasTexture
|
||||
} from 'three';
|
||||
import { EXRLoader } from 'three/examples/jsm/Addons.js';
|
||||
import { useTexture } from '@tresjs/core'
|
||||
import { useGLTF, } from '@tresjs/cientos'
|
||||
const section_count = useState('section_count')
|
||||
|
||||
const section_count = useState<number>('section_count')
|
||||
|
||||
const { scene, renderer, camera } = useTresContext()
|
||||
renderer.value.toneMapping = ReinhardToneMapping
|
||||
|
||||
renderer.value.shadowMap.enabled = true
|
||||
// renderer.value.shadowMap.type = PCFSoftShadowMap
|
||||
renderer.value.shadowMap.type = PCFSoftShadowMap
|
||||
|
||||
// const pbrTexture = await useTexture({
|
||||
// map: '/texture/Grass01_MR_2K/Grass01_2K_BaseColor.png ',
|
||||
// displacementMap: '/texture/Grass01_MR_2K/Grass01_2K_Height.png ',
|
||||
// roughnessMap: '/texture/Grass01_MR_2K/Grass01_2K_Roughness.png',
|
||||
// normalMap: '/texture/Grass01_MR_2K/Grass01_2K_Normal.png ',
|
||||
// aoMap: '/texture/Grass01_MR_2K/Grass01_2K_AO.png ',
|
||||
// // metalnessMap: '/texture/Ground039_4K-JPG_Color.jpg',
|
||||
// // matcap: '/textures/Ground039_4K-JPG_Color.jpg',
|
||||
// // alphaMap: '/textures/myAlphaMapTexture.jpg'
|
||||
// })
|
||||
const pbrTexture = await useTexture({
|
||||
map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png',
|
||||
displacementMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png',
|
||||
roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png',
|
||||
normalMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png',
|
||||
aoMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png',
|
||||
})
|
||||
const groundMaterial = {
|
||||
map: pbrTexture.map,
|
||||
displacementMap: pbrTexture.displacementMap,
|
||||
normalMap: pbrTexture.normalMap,
|
||||
color: "#555",
|
||||
roughness: 0.25,
|
||||
metalness: 0,
|
||||
side: FrontSide
|
||||
}
|
||||
const repeat = 10
|
||||
for (const key in pbrTexture) {
|
||||
if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
|
||||
const key_p = key as keyof typeof pbrTexture
|
||||
const element = pbrTexture[key_p]
|
||||
if (element && element.wrapS) {
|
||||
element.wrapS = RepeatWrapping
|
||||
element.wrapT = RepeatWrapping
|
||||
element.repeat.x = repeat
|
||||
element.repeat.y = repeat
|
||||
element.flipY = false
|
||||
}
|
||||
}
|
||||
}
|
||||
const { scene: top } = await useGLTF('/models_one/verh_100.glb')
|
||||
const { scene: fence } = await useGLTF('/models_one/fence.glb')
|
||||
const { scene: fastening } = await useGLTF('/models_one/krepleniye_planok (1).glb')
|
||||
const { scene: lamelle } = await useGLTF('/models_one/lamel_100.glb')
|
||||
const { scene: light } = await useGLTF('/models_light/zabor_so_svetom.glb')
|
||||
|
||||
const { seek, seekAll } = useSeek()
|
||||
const { seek } = useSeek()
|
||||
watch(section_count, () => {
|
||||
const fences = seekAll(scene.value, 'name', 'fence')
|
||||
const base = seek(scene.value, 'name', 'base')
|
||||
const n = (section_count.value as number)
|
||||
if (fences.length > n) {
|
||||
for (let i = fences.length; i > n; i--) {
|
||||
const item = fences[i - 1]
|
||||
if (item) {
|
||||
base?.remove(item)
|
||||
}
|
||||
}
|
||||
if (base?.children && n < base?.children.length) {
|
||||
base.children = [...base?.children.slice(0, n)]
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -94,32 +44,9 @@ onMounted(() => {
|
|||
});
|
||||
})
|
||||
|
||||
const pointLight = light.children[2]
|
||||
pointLight.color = '#f0dea9'
|
||||
pointLight.shadow.camera.near = 50
|
||||
pointLight.shadow.bias = -0.001
|
||||
</script>
|
||||
<template>
|
||||
<TresGroup :translate-y="-3.25" name="base">
|
||||
<TresMesh receive-shadow :position-y="-0.65" name="ground">
|
||||
<TresCircleGeometry :args="[100, 32]" :rotate-x="-Math.PI * 0.5" />
|
||||
<TresMeshStandardMaterial v-bind="groundMaterial" />
|
||||
</TresMesh>
|
||||
<TresMesh :position="Object.values(pointLight.position).map((el: any) => el * 2.5)" cast-shadow receive-shadow>
|
||||
<TresBoxGeometry :args="[1, 1, 1]" />
|
||||
<TresMeshStandardMaterial />
|
||||
</TresMesh>
|
||||
|
||||
<TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.5"
|
||||
:position="Object.values(pointLight.position).map((el: any) => el * 3)" cast-shadow />
|
||||
|
||||
<TresAmbientLight color="rgb(191,231,255)" :intensity="5" />
|
||||
<template v-if="false">
|
||||
<template v-for="i in light.children[1].children">
|
||||
<TresDirectionalLight :position="i.position" :intensity="5" color="rgb(191,231,255)" cast-shadow />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<TresGroup name="base">
|
||||
<template v-for="i in section_count">
|
||||
<template v-if="i <= 20">
|
||||
<ModelFence :index="i" :models="{ top, fence, fastening, lamelle }" />
|
||||
|
|
|
|||
Loading…
Reference in New Issue