mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change color

This commit is contained in:
Kseninia Mikhaylova 2024-06-06 18:26:51 +03:00
parent d4d277eacb
commit 02cc2a3c3e
8 changed files with 77 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
app.vue
View File

@ -47,27 +47,27 @@ const toggleModal = () => {
</div>
</div>
</div>
<div class="block bg-white" :id="about?.slug">
<div class="siteblock bg-white" :id="about?.slug">
<div class="container">
<div class="block-content">
<h2 class="block-title">{{ about?.title }}</h2>
<div class="block-text">
<div class="siteblock-content">
<h2 class="siteblock-title">{{ about?.title }}</h2>
<div class="siteblock-text">
{{ about?.content }}
<p>
<button class="not-prose" @click="toggleModal">Купить прямо сейчас</button>
</p>
</div>
</div>
<div class="block-image">
<div class="siteblock-image">
<NuxtImg :src="[apiBase, about?.image].join('/')" />
</div>
</div>
</div>
<div class="block block_imgbg bg-slate-500"
<div class="siteblock siteblock_imgbg bg-slate-500"
:style="[{ backgroundImage: `url(${[apiBase, reviews?.image].join('/')})` }]" :id="reviews?.slug">
<NuxtImg :src="[apiBase, reviews?.image].join('/')" class="invisible" />
</div>
<div class="block bg-white" :id="reviews?.slug">
<div class="siteblock bg-white" :id="reviews?.slug">
<div class="container">
<template v-for="item in reviewsData?.slice(0, 3)">
<div class="review">
@ -84,14 +84,14 @@ const toggleModal = () => {
</template>
</div>
</div>
<div class="block bg-white">
<div class="siteblock bg-white">
<ExpDiagram />
</div>
<div class="block block_imgbg bg-slate-500"
<div class="siteblock siteblock_imgbg bg-slate-500"
:style="[{ backgroundImage: `url(${[apiBase, delivery?.image].join('/')})` }]">
<NuxtImg :src="[apiBase, delivery?.image].join('/')" class="invisible" />
</div>
<div class="block bg-white">
<div class="siteblock bg-white">
<CalcValues />
<CalcModels />
</div>

6
assets/main.scss
View File

@ -56,7 +56,7 @@ a[href^="#"] {
}
}
.block {
.siteblock {
@apply py-10;
&_imgbg {
@ -128,3 +128,7 @@ button {
@apply bg-neutral hover:bg-neutral-400
}
}
.form {
@apply col-span-full flex gap-4
}

4
components/calcModels.vue
View File

@ -22,8 +22,8 @@ const controlsState = reactive({
<TresPerspectiveCamera :position="[7, 2, 6]" />
<OrbitControls v-bind="controlsState" make-default />
<ModelParametric />
<TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />
<TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
<TresDirectionalLight :position="[2, 2, 2]" color="#f2f2f2" :intensity="2" cast-shadow />
<TresDirectionalLight :position="[2, 2, -2]" color="#f6f6f6" :intensity="2" cast-shadow />
<TresAmbientLight />
</TresCanvas>
</div>

14
components/calcValues.vue
View File

@ -1,6 +1,10 @@
<script setup lang="ts">
import converter from 'ral-hex-converter'
const lamelles_count = useState('lamelles_count', () => 8)
const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
const pillar_color = useState('pillar_color', () => 'black')
const lamelle_color = useState('lamelle_color', () => 'red')
const parametric = {
length: {
min: 100,
@ -22,6 +26,9 @@ const changeParametres = () => {
lamelles_count.value = lamelles
fence_section.value = form_state.length * 0.001
}
const setLamelleColor = (color: string) => {
lamelle_color.value = color
}
watch(form_state, changeParametres, { deep: true })
</script>
<template>
@ -35,6 +42,13 @@ watch(form_state, changeParametres, { deep: true })
<label for="height">Высота забора, мм</label>
<input id="height" type="number" v-bind="parametric.height" v-model="form_state.height" />
</div>
<div class="colors flex flex-wrap">
<template v-for="color in converter.hex">
<div class="color size-5" :class="[{ 'outline outline-primary': color == lamelle_color }]"
:style="[{ backgroundColor: color }]" @click="setLamelleColor(color)">
</div>
</template>
</div>
</form>
</div>
</template>

35
components/model/item.vue
View File

@ -1,7 +1,8 @@
<script setup lang="ts">
import { useGLTF } from '@tresjs/cientos'
import { Box3, Vector3 } from 'three';
const props = defineProps(['modelUrl', 'position', 'removePos', 'target'])
import { Box3, Color, MeshStandardMaterial, Vector3 } from 'three';
const props = defineProps(['modelUrl', 'position', 'removePos', 'target', 'color'])
const { scene } = await useGLTF(props.modelUrl)
scene.receiveShadow = true
scene.castShadow = true
@ -13,15 +14,7 @@ let size = new Vector3();
box.getSize(size)
// const box_size = [size.x, size.y, size.z]
scene.children.forEach((el: any) => {
el.castShadow = true
el.receiveShadow = true
if (props.removePos) {
el.translateX(-el.position.x)
el.translateY(-el.position.y)
el.translateZ(-el.position.z)
}
});
const material = new MeshStandardMaterial({ color: props.color ? new Color(props.color) : new Color('#9c9c9c') })
function shadows_and_pos(scene: any) {
scene.children.forEach((el: any) => {
@ -32,6 +25,7 @@ function shadows_and_pos(scene: any) {
el.translateY(-el.position.y)
el.translateZ(-el.position.z)
}
el.material = material
shadows_and_pos(el)
})
}
@ -52,13 +46,32 @@ onLoop(() => {
axis.forEach(element => {
const point = model.value.position[element.axis]
let step = stepbase * target[element.axis as vectorType]
if (step !== 0) {
if (Math.abs(point) >= Math.abs(target[element.axis as vectorType])) {
step = 0
}
model.value[element.func](step)
}
});
}
})
const lamelles_count = useState<number>('lamelles_count')
const fence_section = useState<number>('fence_section')
const pillar_color = useState('pillar_color', () => 'black')
const lamelle_color = useState('lamelle_color', () => 'red')
watch([lamelles_count, fence_section, lamelle_color], () => {
if (props.color && `#${material.color.getHexString()}` !== props.color) {
const material = new MeshStandardMaterial({ color: props.color ? new Color(props.color) : new Color('#9c9c9c') })
function set_material(scene: any) {
scene.children.forEach((el: any) => {
el.material = material
set_material(el)
})
}
set_material(model.value)
}
})
</script>
<template>
<TresGroup :position="props.position || [0, 0, 0]" ref="model">

19
components/model/parametric.vue
View File

@ -1,15 +1,20 @@
<script setup lang="ts">
const lamelles_count = useState<number>('lamelles_count')
const fence_section = useState<number>('fence_section')
const pillar_color = useState('pillar_color', () => 'black')
const lamelle_color = useState('lamelle_color', () => 'red')
const lSize = 0.115
const bSize = 0.0235
const pillar_size = 80 * 0.001
const { scene, renderer, camera } = useTresContext()
watch([lamelles_count, fence_section], () => {
// console.log(scene)
console.log(lamelles_count)
renderer.value.render(scene.value, camera.value)
renderer.value.autoClear = true
watch([lamelles_count, fence_section, lamelle_color], () => {
// renderer.value.clearColor()
// renderer.value.render(scene.value, camera.value)
})
</script>
<template>
@ -21,8 +26,8 @@ watch([lamelles_count, fence_section], () => {
:remove-pos="true" />
<ModelItem model-url="/models_one/verh_100.glb"
:position="[-fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" />
<ModelItem model-url="/models_one/verh_100.glb"
:position="[fence_section * 0.5, lamelles_count * lSize, 0]" :remove-pos="true" />
<ModelItem model-url="/models_one/verh_100.glb" :position="[fence_section * 0.5, lamelles_count * lSize, 0]"
:remove-pos="true" />
<template v-for="(n, i) in lamelles_count">
<TresGroup :position="[-fence_section * 0.5 - pillar_size, (lSize * i), 0]">
<ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" />
@ -31,7 +36,7 @@ watch([lamelles_count, fence_section], () => {
<ModelItem model-url="/models_one/stolb.glb" :remove-pos="true" />
</TresGroup>
<TresGroup :scale-x="fence_section * 10" :position="[0, (lSize * i), 0.03]">
<ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" />
<ModelItem model-url="/models_one/lamel_100.glb" :remove-pos="true" :color="lamelle_color" />
</TresGroup>
</template>
<TresGroup :scale-x="fence_section * 10" :position="[0, lamelles_count * lSize, 0]">

7
package-lock.json generated
View File

@ -13,9 +13,9 @@
"@tresjs/cientos": "^3.9.0",
"@tresjs/core": "^4.0.2",
"@tresjs/nuxt": "^2.1.2",
"@vueuse/core": "^10.10.0",
"nuxt": "^3.11.2",
"nuxt-svgo": "^4.0.1",
"ral-hex-converter": "^1.0.1",
"sass": "^1.77.4",
"tailwindcss": "^3.4.3",
"three": "^0.165.0",
@ -11542,6 +11542,11 @@
"resolved": "https://registry.npmjs.org/radix3/-/radix3-1.1.2.tgz",
"integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA=="
},
"node_modules/ral-hex-converter": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/ral-hex-converter/-/ral-hex-converter-1.0.1.tgz",
"integrity": "sha512-A0C1KzDyUzKRgLLVBmjFmPKnkkq7VvgL6MszNxkPuH6AlFfr6zdEYdWvDWw4tChWql7OAcOOgUvF8wVueopTFg=="
},
"node_modules/randombytes": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",

1
package.json
View File

@ -18,6 +18,7 @@
"@tresjs/nuxt": "^2.1.2",
"nuxt": "^3.11.2",
"nuxt-svgo": "^4.0.1",
"ral-hex-converter": "^1.0.1",
"sass": "^1.77.4",
"tailwindcss": "^3.4.3",
"three": "^0.165.0",