FirstScene.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <script setup lang="ts">
  2. import { ref, onMounted } from 'vue'
  3. import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
  4. import { TresCanvas } from '@tresjs/core'
  5. import { OrbitControls } from '@tresjs/cientos'
  6. const LightRef = ref()
  7. onMounted(() => {
  8. LightRef.value.shadow.mapSize.set(1024, 1024)
  9. LightRef.value.shadow.camera.near = 0.5
  10. LightRef.value.shadow.camera.far = 2000
  11. LightRef.value.shadow.camera.left = -10
  12. LightRef.value.shadow.camera.right = 10
  13. LightRef.value.shadow.camera.top = 10
  14. LightRef.value.shadow.camera.bottom = -10
  15. })
  16. const gl = {
  17. clearColor: '#82DBC5',
  18. shadows: true,
  19. alpha: false,
  20. shadowMapType: BasicShadowMap,
  21. outputColorSpace: SRGBColorSpace,
  22. toneMapping: NoToneMapping,
  23. }
  24. </script>
  25. <template>
  26. <TresCanvas v-bind="gl">
  27. <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
  28. <OrbitControls />
  29. <TresMesh :position="[-2, 6, 0]" :rotation="[0, Math.PI, 0]" cast-shadow>
  30. <TresConeGeometry :args="[1, 1.5, 3]" />
  31. <TresMeshToonMaterial color="#82DBC5" />
  32. </TresMesh>
  33. <TresMesh :position="[0, 4, 0]" cast-shadow>
  34. <TresBoxGeometry :args="[1.5, 1.5, 1.5]" />
  35. <TresMeshToonMaterial color="#4F4F4F" />
  36. </TresMesh>
  37. <TresMesh :position="[2, 2, 0]" cast-shadow>
  38. <TresSphereGeometry />
  39. <TresMeshToonMaterial color="#FBB03B" />
  40. </TresMesh>
  41. <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
  42. <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
  43. <TresPlaneGeometry :args="[10, 10, 10, 10]" />
  44. <TresMeshToonMaterial color="#D3FC8A" />
  45. </TresMesh>
  46. <TresAmbientLight :intensity="0.75" />
  47. <TresDirectionalLight ref="LightRef" :position="[0, 2, 4]" :intensity="2" cast-shadow />
  48. </TresCanvas>
  49. </template>