Merge branch 'bx-696-startproject' of https://git.svs-tech.pro/ksenia_mikhailova/mns-mini-zabor into bx-696-startproject

This commit is contained in:
commit ef26bb9845
3 changed files with 12 additions and 36 deletions

View File

@ -1,17 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { CanvasTexture, FrontSide, RepeatWrapping } from 'three'; import { FrontSide, RepeatWrapping } from 'three';
import { TresCanvas, useTexture } from '@tresjs/core' import { TresCanvas, useTexture } from '@tresjs/core'
import { OrbitControls, useGLTF } from '@tresjs/cientos' import { OrbitControls, useGLTF } from '@tresjs/cientos'
const lamelles_count = use_lamelles_count()
const fence_section = use_fence_section() const fence_section = use_fence_section()
const remove_pillar = use_remove_pillar()
const pillar_color = use_pillar_color()
const lamelle_color = use_lamelle_color()
const section_count = use_section_count() const section_count = use_section_count()
const extra_section = use_extra_section() const extra_section = use_extra_section()
const total_length = use_total_length()
const min_length = use_min_length()
const max_size = use_max_size() const max_size = use_max_size()
const controlsState = reactive({ const controlsState = reactive({
@ -71,28 +65,10 @@ const loadAll = async () => {
}) })
} }
const camera = ref("camera") const camera = ref("camera")
const test_texture = reactive({
color: 0xff00ff,
transparent: true,
opacity: 1
})
onMounted(() => { onMounted(() => {
cameraStat.aspect = window.innerWidth / (window.innerHeight * 0.5) cameraStat.aspect = window.innerWidth / (window.innerHeight * 0.5)
loadAll() loadAll()
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
canvas.width = 64;
canvas.height = 64;
// drawing gray scale areas
ctx.fillStyle = '#404040';
ctx.fillRect(0, 0, 32, 32);
ctx.fillStyle = '#808080';
ctx.fillRect(32, 0, 32, 32);
ctx.fillStyle = '#c0c0c0';
ctx.fillRect(0, 32, 32, 32);
ctx.fillStyle = '#f0f0f0';
ctx.fillRect(32, 32, 32, 32);
test_texture.alphaMap = new CanvasTexture(canvas);
}) })
watch(section_count, () => { watch(section_count, () => {
let v = (section_count.value + ~~(!!extra_section.value)) * 1.5 let v = (section_count.value + ~~(!!extra_section.value)) * 1.5
@ -119,10 +95,6 @@ watch(section_count, () => {
<TresMeshStandardMaterial v-bind="groundMaterial" /> <TresMeshStandardMaterial v-bind="groundMaterial" />
</TresMesh> </TresMesh>
<TresMesh>
<TresBoxGeometry />
<TresMeshBasicMaterial v-bind="test_texture" />
</TresMesh>
<template v-if="pointLight"> <template v-if="pointLight">
<TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.5" <TresPointLight v-bind="pointLight" :intensity="pointLight.intensity * 0.5"
:position="Object.values(pointLight.position).map((el: any) => el * 3)" cast-shadow /> :position="Object.values(pointLight.position).map((el: any) => el * 3)" cast-shadow />

View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useGLTF } from '@tresjs/cientos' import { useGLTF } from '@tresjs/cientos'
import { Box3, Color, MeshStandardMaterial, Vector3 } from 'three'; import { Vector3 } from 'three';
const props = defineProps(['modelUrl', 'model', 'position', 'removePos', 'target', 'color', 'map']) const props = defineProps(['modelUrl', 'model', 'position', 'removePos', 'target', 'color', 'map'])
let scene: any let scene: any

View File

@ -15,7 +15,7 @@ const section_count = use_section_count()
const extra_section = use_extra_section() const extra_section = use_extra_section()
const max_size = use_max_size() const max_size = use_max_size()
const { scene, renderer, camera } = useTresContext() const { scene, renderer } = useTresContext()
renderer.value.toneMapping = ReinhardToneMapping renderer.value.toneMapping = ReinhardToneMapping
renderer.value.shadowMap.enabled = true renderer.value.shadowMap.enabled = true
@ -36,15 +36,17 @@ function set_material(scene: any, material: any) {
set_material(el, material) set_material(el, material)
}) })
} }
const lcolor = getColorHexFromRal(lamelle_color.value)
const lamelle_material = new MeshStandardMaterial({ const lamelle_material = new MeshStandardMaterial({
color: new Color(getColorHexFromRal(lamelle_color.value as ralTypes)), color: new Color(lcolor || '#9c9c9c'),
transparent: true, transparent: true,
opacity: 1, opacity: 1,
roughness: 0.3, roughness: 0.3,
metalness: 0.3 metalness: 0.3
}) })
const pcolor = getColorHexFromRal(pillar_color.value)
const pillar_material = new MeshStandardMaterial({ const pillar_material = new MeshStandardMaterial({
color: new Color(getColorHexFromRal(pillar_color.value as ralTypes)), color: new Color(pcolor || '#eee'),
transparent: true, transparent: true,
opacity: 1, opacity: 1,
roughness: 0.3, roughness: 0.3,
@ -59,7 +61,8 @@ const { seek, seekAll } = useSeek()
watch(lamelle_color, () => { watch(lamelle_color, () => {
const items = seekAll(scene.value, 'name', "lamelles") const items = seekAll(scene.value, 'name', "lamelles")
const m = lamelle_material const m = lamelle_material
m.color = new Color(getColorHexFromRal(lamelle_color.value as ralTypes)) const mcolor = getColorHexFromRal(lamelle_color.value as ralTypes)
if (mcolor) m.color = new Color(mcolor)
items.forEach(element => { items.forEach(element => {
set_material(element, m) set_material(element, m)
}); });
@ -73,7 +76,8 @@ watch(pillar_color, () => {
...seekAll(scene.value, 'name', "top_section"), ...seekAll(scene.value, 'name', "top_section"),
] ]
const m = pillar_material const m = pillar_material
m.color = new Color(getColorHexFromRal(pillar_color.value as ralTypes)) const mcolor = getColorHexFromRal(pillar_color.value as ralTypes)
if (mcolor) m.color = new Color(mcolor)
items.forEach(element => { items.forEach(element => {
set_material(element, m) set_material(element, m)
}); });