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

test texture

This commit is contained in:
Kseninia Mikhaylova 2024-06-12 16:32:31 +03:00
parent c638a6e91e
commit e78fdfb079
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/calcModels.vue
View File

@ -20,13 +20,13 @@ onMounted(() => {
cameraStat.aspect = window.innerWidth / 600 cameraStat.aspect = window.innerWidth / 600
}) })
const spot = reactive({ const spot = reactive({
x: 10, y: 10, z: 10, intensity: 100, distance: 10, color: 'red' x: 10, y: 10, z: 10, intensity: 10, distance: 10, color: 'red'
}) })
const directional = reactive({ const directional = reactive({
x: 20, y: 10, z: 10, intensity: 100, distance: 10, color: 'green' x: 20, y: 10, z: 10, intensity: 10, distance: 10, color: 'green'
}) })
const point = reactive({ const point = reactive({
x: 30, y: 10, z: 10, intensity: 100, distance: 10, color: 'blue' x: 30, y: 10, z: 10, intensity: 10, distance: 10, color: 'blue'
}) })
</script> </script>
<template> <template>
@ -55,15 +55,16 @@ const point = reactive({
<TresPerspectiveCamera v-bind="cameraStat" /> <TresPerspectiveCamera v-bind="cameraStat" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />
<Suspense> <Suspense>
<Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" /> <!-- <Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" /> -->
</Suspense> </Suspense>
<Suspense> <Suspense>
<ModelParametric /> <ModelParametric />
</Suspense> </Suspense>
<TresSpotLight v-bind="spot" :position="[spot.x, spot.y, spot.z]" cast-shadow v-light-helper /> <TresSpotLight v-bind="spot" :position="[spot.x, spot.y, spot.z]" cast-shadow v-light-helper />
<TresDirectionalLight v-bind="directional" :position="[directional.x, directional.y, directional.z]" cast-shadow <TresDirectionalLight v-bind="directional" :position="[directional.x, directional.y, directional.z]"
v-light-helper /> cast-shadow v-light-helper />
<TresPointLight v-bind="point" :position="[point.x, point.y, point.z]" cast-shadow v-light-helper /> <TresPointLight v-bind="point" :position="[point.x, point.y, point.z]" cast-shadow v-light-helper />
<TresAmbientLight />
</TresCanvas> </TresCanvas>
</ClientOnly> </ClientOnly>
</div> </div>

6
components/model/parametric.vue
View File

@ -20,7 +20,7 @@ const pbrTexture = await useTexture({
// matcap: '/textures/Ground039_4K-JPG_Color.jpg', // matcap: '/textures/Ground039_4K-JPG_Color.jpg',
// alphaMap: '/textures/myAlphaMapTexture.jpg' // alphaMap: '/textures/myAlphaMapTexture.jpg'
}) })
const repeat = 10 const repeat = 5
for (const key in pbrTexture) { for (const key in pbrTexture) {
if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) { if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
const element = pbrTexture[key]; const element = pbrTexture[key];
@ -29,6 +29,7 @@ for (const key in pbrTexture) {
element.wrapT = RepeatWrapping element.wrapT = RepeatWrapping
element.repeat.x = repeat element.repeat.x = repeat
element.repeat.y = repeat element.repeat.y = repeat
element.flipY = false
} }
} }
} }
@ -84,7 +85,8 @@ texture.needsUpdate = true;
<TresGroup :translate-y="-3.25" name="base"> <TresGroup :translate-y="-3.25" name="base">
<TresMesh receive-shadow :position-y="-0.5" name="ground"> <TresMesh receive-shadow :position-y="-0.5" name="ground">
<TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" /> <TresCircleGeometry :args="[55, 32]" :rotate-x="-Math.PI * 0.5" />
<TresMeshStandardMaterial v-bind="pbrTexture" /> <TresMeshStandardMaterial :map="pbrTexture.map" :normal-map="pbrTexture.normalMap"
:roughness-map="pbrTexture.roughnessMap" :ao-map="pbrTexture.aoMap" :metalness="0" :roughness="0" />
</TresMesh> </TresMesh>
<TresMesh receive-shadow :position-y="-0.25" :position-x="10" name="ground"> <TresMesh receive-shadow :position-y="-0.25" :position-x="10" name="ground">
<TresCircleGeometry :args="[10]" :rotate-x="-Math.PI * 0.5" /> <TresCircleGeometry :args="[10]" :rotate-x="-Math.PI * 0.5" />