calc

components/calcModels.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { AdditiveBlending, FrontSide, RepeatWrapping } from 'three';
+import { AdditiveBlending, CanvasTexture, FrontSide, RepeatWrapping } from 'three';
 import { TresCanvas, useTexture } from '@tresjs/core'
 import { OrbitControls, Environment, useGLTF } from '@tresjs/cientos'
 
@@ -65,9 +65,28 @@ 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
@@ -93,6 +112,11 @@ watch(section_count, () => {
                     <TresCircleGeometry :args="[50, 32]" :rotate-x="-Math.PI * 0.5" />
                     <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 />

components/modal.vue

@@ -91,6 +91,7 @@ const roubleSign = new Intl.NumberFormat('ru-RU', {
     style: 'currency',
     currency: 'RUB',
 });
+const total_txt = computed(() => {
     const { mortgage, pillar, lamella, rivets, bar, guide } = calculatorData.value
     const pillar_count = (section_count.value + 1)
     const pil = (parseFloat(mortgage) + parseFloat(pillar)) * pillar_count
@@ -107,7 +108,6 @@ const guides_count = section_count.value * 2
     const guides = guides_count * parseFloat(guide) * lam_count * 0.115
 
     const total = (!remove_pillar.value ? pil : 0) + lam + guides + top
-const total_txt = computed(() => {
     return [
         !remove_pillar.value && `Столб, ${pillar_count}: (${parseFloat(mortgage)} + ${parseFloat(pillar)}) x ${pillar_count} = ${roubleSign.format(pil)}`,
         `Ламели, ${lam_count}: (${lam_count} x ${length} x ${lamella}) + ${rivets} = ${roubleSign.format(lam)}`,
@@ -127,7 +127,7 @@ const total_txt = computed(() => {
                     <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
                     <input type="phone" placeholder="Номер телефона или e-mail" v-model="modal_data.phone"
                         @keypress="validateInput" @keyup="validate" />
-                    Итого: {{ roubleSign.format(total) }}
+                    {{ total_txt[total_txt.length - 1] }}
                     <div class="flex gap-4">
                         <button class="not-prose" :disabled="modal_form.disabled" type="submit">Отправить</button>
                         <button class="not-prose" type="reset" @click="toggleModal">Отмена</button>

components/model/item.vue

@@ -22,6 +22,8 @@ box.getSize(size)
 const getMaterial = async () => {
     return new MeshStandardMaterial({
         color: new Color(props.color || '#9c9c9c'),
+        transparent: true,
+        opacity:1,
         roughness: 0.3,
         metalness: 0.3
     })