Second light

components/calcModels.vue

@@ -3,6 +3,7 @@ import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 //@ts-ignore
 import { useGLTF } from '@tresjs/cientos'
+import { degToRad, radToDeg } from 'three/src/math/MathUtils.js';
 
 const fence_section = use_fence_section()
 const section_count = use_section_count()
@@ -11,11 +12,12 @@ const max_size = use_max_size()
 
 const controlsState = reactive({
     distance: section_count.value,
-    minDistance: 7,
-    maxDistance: 20,
+    minDistance: 10,
+    maxDistance: 10,
     position: { x: 0, y: 0, z: 0 },
     enablePan: false,
-    maxPolarAngle: (Math.PI / 2) - 0.2,
+    minPolarAngle: degToRad(30),
+    maxPolarAngle: degToRad(90),
 })
 const cameraStat = reactive({
     position: [-4, 2, 8],
@@ -26,18 +28,19 @@ const cameraStat = reactive({
 const pointLight = ref()
 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.intensity = pointLight.value.intensity * 0.1
-    pointLight.value.shadow.camera.near = 50
+    pointLight.value = light.children[2].clone()
+    pointLight.value.intensity = pointLight.value.intensity * 0.05
     pointLight.value.shadow.bias = -0.002
     const j = 4
     pointLight.value.shadow.mapSize.x = 512 * j
     pointLight.value.shadow.mapSize.y = 512 * j
 
-    const k = 3
+    const k = 1
+    // pointLight.value.position.x = pointLight.value.position.x * k
+    // pointLight.value.position.y = pointLight.value.position.y * k
+    // pointLight.value.position.z = pointLight.value.position.z * k
     pointLight.value.position.x = pointLight.value.position.x * k
-    pointLight.value.position.y = pointLight.value.position.y * k
+    pointLight.value.position.y = pointLight.value.position.z * k
     pointLight.value.position.z = pointLight.value.position.z * k
 }
 const camera = ref("camera")
@@ -62,7 +65,7 @@ watch([section_count, extra_section], () => {
                 </div>
             </template>
             <Loader />
-            <TresCanvas>
+            <TresCanvas clear-color="#ccc">
                 <TresPerspectiveCamera v-bind="cameraStat" ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default />
                 <TresGroup :position-x="Math.min(section_count, max_size) * fence_section * -1" :position-y="-3">
@@ -76,8 +79,11 @@ watch([section_count, extra_section], () => {
                 </TresMesh>
 
                 <template v-if="pointLight">
-                    <TresPointLight v-bind="pointLight" cast-shadow />
+                    <TresPointLight v-bind="pointLight.clone()" cast-shadow />
+                    <TresPointLight v-bind="pointLight.clone()" :position-x="pointLight.position.x * -1"
+                        :position-z="pointLight.position.z * -1" cast-shadow />
                 </template>
+                <TresAmbientLight intensity="10" />
             </TresCanvas>
         </ClientOnly>
     </div>

components/model/parametric.vue

@@ -114,12 +114,12 @@ onMounted(async () => {
     if (renderer.value && camera.value) {
         renderer.value.render(scene.value, camera.value)
     }
-    scene.value.environment = result.renderTarget.texture
-    scene.value.background = result.renderTarget.texture
-    scene.value.background.mapping = EquirectangularReflectionMapping
-    scene.value.backgroundRotation = new Euler(0, 10, 0)
-    scene.value.backgroundIntensity = 1.5
-    scene.value.backgroundBlurriness = 0.06
+    // scene.value.environment = result.renderTarget.texture
+    // scene.value.background = result.renderTarget.texture
+    // scene.value.background.mapping = EquirectangularReflectionMapping
+    // scene.value.backgroundRotation = new Euler(0, 10, 0)
+    // scene.value.backgroundIntensity = 1.5
+    // scene.value.backgroundBlurriness = 0.06
     result.renderTarget.texture.dispose();
 })
 

utils/material.ts

@@ -1,5 +1,5 @@
 import { Color, DoubleSide, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, TextureLoader, Vector2 } from "three"
-import { useLoader } from '@tresjs/core'
+import { useLoader, type TresLoader } from '@tresjs/core'
 
 const set_metaril_func = (scene: any, material: any) => {
     scene.children.forEach((el: any) => {
@@ -31,7 +31,7 @@ export const set_material = (scene: any, color: any, count: number | undefined =
         color: new Color(c || '#9c9c00'),
         alphaMap: count ? texture : null,
         transparent: true,
-        opacity: 0.75,
+        opacity: 1,
         // roughness: 0.5,
         // metalness: 0,
         side: DoubleSide,