TestSphere.vue 1.2 KB

123456789101112131415161718192021222324252627282930
  1. <script setup lang="ts">
  2. import { Ref, ref } from 'vue'
  3. import { useRenderLoop, useTexture } from '/@/core/'
  4. import { TresInstance } from '../types'
  5. const sphereRef: Ref<TresInstance | null> = ref(null)
  6. const { onLoop, resume } = useRenderLoop()
  7. resume()
  8. onLoop(({ elapsed }) => {
  9. if (sphereRef.value) {
  10. sphereRef.value.position.y = Math.sin(elapsed * 0.2) * 2.0
  11. }
  12. })
  13. /* const texture = await useTexture(['/textures/stylized-leaves-material/Stylized_Leaves_002_basecolor.jpg']) */
  14. const pbrTexture = await useTexture({
  15. map: '/textures/stylized-leaves-material/Stylized_Leaves_002_basecolor.jpg',
  16. displacementMap: '/textures/stylized-leaves-material/Stylized_Leaves_002_height.png',
  17. roughnessMap: '/textures/stylized-leaves-material/Stylized_Leaves_002_roughness.jpg',
  18. normalMap: '/textures/stylized-leaves-material/Stylized_Leaves_002_normal.jpg',
  19. ambientOcclusion: '/textures/stylized-leaves-material/Stylized_Leaves_002_ambientOcclusion.jpg',
  20. })
  21. </script>
  22. <template>
  23. <TresMesh ref="sphereRef" :position="[-2, 2, 2]" :scale="1" cast-shadow>
  24. <TresSphereGeometry :args="[1, 500, 500]" />
  25. <TresMeshStandardMaterial v-bind="pbrTexture" />
  26. </TresMesh>
  27. </template>