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
|
@ -1,17 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import { CanvasTexture, FrontSide, RepeatWrapping } from 'three';
|
||||
import { FrontSide, RepeatWrapping } from 'three';
|
||||
import { TresCanvas, useTexture } from '@tresjs/core'
|
||||
import { OrbitControls, useGLTF } from '@tresjs/cientos'
|
||||
|
||||
const lamelles_count = use_lamelles_count()
|
||||
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 extra_section = use_extra_section()
|
||||
const total_length = use_total_length()
|
||||
const min_length = use_min_length()
|
||||
const max_size = use_max_size()
|
||||
|
||||
const controlsState = reactive({
|
||||
|
@ -71,28 +65,10 @@ const loadAll = async () => {
|
|||
})
|
||||
}
|
||||
const camera = ref("camera")
|
||||
const test_texture = reactive({
|
||||
color: 0xff00ff,
|
||||
transparent: true,
|
||||
opacity: 1
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
cameraStat.aspect = window.innerWidth / (window.innerHeight * 0.5)
|
||||
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, () => {
|
||||
let v = (section_count.value + ~~(!!extra_section.value)) * 1.5
|
||||
|
@ -119,10 +95,6 @@ watch(section_count, () => {
|
|||
<TresMeshStandardMaterial v-bind="groundMaterial" />
|
||||
</TresMesh>
|
||||
|
||||
<TresMesh>
|
||||
<TresBoxGeometry />
|
||||
<TresMeshBasicMaterial v-bind="test_texture" />
|
||||
</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 />
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
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'])
|
||||
|
||||
let scene: any
|
||||
|
|
|
@ -15,7 +15,7 @@ const section_count = use_section_count()
|
|||
const extra_section = use_extra_section()
|
||||
const max_size = use_max_size()
|
||||
|
||||
const { scene, renderer, camera } = useTresContext()
|
||||
const { scene, renderer } = useTresContext()
|
||||
renderer.value.toneMapping = ReinhardToneMapping
|
||||
|
||||
renderer.value.shadowMap.enabled = true
|
||||
|
@ -36,15 +36,17 @@ function set_material(scene: any, material: any) {
|
|||
set_material(el, material)
|
||||
})
|
||||
}
|
||||
const lcolor = getColorHexFromRal(lamelle_color.value)
|
||||
const lamelle_material = new MeshStandardMaterial({
|
||||
color: new Color(getColorHexFromRal(lamelle_color.value as ralTypes)),
|
||||
color: new Color(lcolor || '#9c9c9c'),
|
||||
transparent: true,
|
||||
opacity: 1,
|
||||
roughness: 0.3,
|
||||
metalness: 0.3
|
||||
})
|
||||
const pcolor = getColorHexFromRal(pillar_color.value)
|
||||
const pillar_material = new MeshStandardMaterial({
|
||||
color: new Color(getColorHexFromRal(pillar_color.value as ralTypes)),
|
||||
color: new Color(pcolor || '#eee'),
|
||||
transparent: true,
|
||||
opacity: 1,
|
||||
roughness: 0.3,
|
||||
|
@ -59,7 +61,8 @@ const { seek, seekAll } = useSeek()
|
|||
watch(lamelle_color, () => {
|
||||
const items = seekAll(scene.value, 'name', "lamelles")
|
||||
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 => {
|
||||
set_material(element, m)
|
||||
});
|
||||
|
@ -73,7 +76,8 @@ watch(pillar_color, () => {
|
|||
...seekAll(scene.value, 'name', "top_section"),
|
||||
]
|
||||
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 => {
|
||||
set_material(element, m)
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue