TheExperience.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <script setup lang="ts">
  2. import {
  3. sRGBEncoding,
  4. LinearEncoding,
  5. BasicShadowMap,
  6. PCFShadowMap,
  7. PCFSoftShadowMap,
  8. VSMShadowMap,
  9. NoToneMapping,
  10. LinearToneMapping,
  11. ReinhardToneMapping,
  12. CineonToneMapping,
  13. ACESFilmicToneMapping,
  14. CustomToneMapping,
  15. } from 'three'
  16. import { reactive, ref } from 'vue'
  17. import { OrbitControls, useTweakPane, TransformControls } from '../../../cientos/src/'
  18. import { useCamera } from '../core'
  19. import { TresCanvas } from '../core/useRenderer/component'
  20. /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
  21. const { updateCamera } = useCamera()
  22. updateCamera
  23. const state = reactive({
  24. clearColor: '#201919',
  25. shadows: true,
  26. alpha: false,
  27. useLegacyLights: true,
  28. shadowMapType: BasicShadowMap,
  29. outputEncoding: sRGBEncoding,
  30. toneMapping: NoToneMapping,
  31. })
  32. const sphereRef = ref()
  33. const { pane } = useTweakPane()
  34. pane.addInput(state, 'clearColor', {
  35. label: 'Background Color',
  36. colorMode: 'hex',
  37. })
  38. pane.addInput(state, 'shadows', {
  39. label: 'Shadows',
  40. })
  41. pane.addInput(state, 'useLegacyLights', {
  42. label: 'useLegacyLights',
  43. })
  44. pane
  45. .addBlade({
  46. view: 'list',
  47. label: 'outputEncoding',
  48. options: [
  49. { text: 'sRGBEncoding', value: sRGBEncoding },
  50. { text: 'LinearEncoding', value: LinearEncoding },
  51. ],
  52. value: sRGBEncoding,
  53. })
  54. .on('change', ev => {
  55. state.outputEncoding = ev.value
  56. })
  57. pane
  58. .addBlade({
  59. view: 'list',
  60. label: 'ShadowMap Type',
  61. options: [
  62. { text: 'BasicShadowMap', value: BasicShadowMap },
  63. { text: 'PCFShadowMap', value: PCFShadowMap },
  64. { text: 'PCFSoftShadowMap', value: PCFSoftShadowMap },
  65. { text: 'VSMShadowMap', value: VSMShadowMap },
  66. ],
  67. value: BasicShadowMap,
  68. })
  69. .on('change', ev => {
  70. state.shadowMapType = ev.value
  71. })
  72. pane
  73. .addBlade({
  74. view: 'list',
  75. label: 'toneMapping',
  76. options: [
  77. { text: 'NoToneMapping', value: NoToneMapping },
  78. { text: 'LinearToneMapping', value: LinearToneMapping },
  79. { text: 'ReinhardToneMapping', value: ReinhardToneMapping },
  80. { text: 'CineonToneMapping', value: CineonToneMapping },
  81. { text: 'ACESFilmicToneMapping', value: ACESFilmicToneMapping },
  82. { text: 'CustomToneMapping', value: CustomToneMapping },
  83. ],
  84. value: NoToneMapping,
  85. })
  86. .on('change', ev => {
  87. console.log(ev.value)
  88. state.toneMapping = ev.value
  89. })
  90. function onPointerEnter(ev) {
  91. console.log('onPointerEnter', ev)
  92. }
  93. function onPointerMove(ev) {
  94. console.log('onPointerMove', ev)
  95. }
  96. function onPointerLeave(ev) {
  97. console.log('onPointerLeave', ev)
  98. }
  99. function onClick(ev) {
  100. console.log('click', ev)
  101. }
  102. </script>
  103. <template>
  104. <TresCanvas v-bind="state">
  105. <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
  106. <OrbitControls make-default />
  107. <TresScene>
  108. <TresAmbientLight :intensity="0.5" />
  109. <TransformControls mode="scale" :object="sphereRef" />
  110. <TresMesh
  111. ref="sphereRef"
  112. :position="[0, 4, 0]"
  113. cast-shadow
  114. @pointer-enter="onPointerEnter"
  115. @pointer-move="onPointerMove"
  116. @pointer-leave="onPointerLeave"
  117. @click="onClick"
  118. >
  119. <TresSphereGeometry />
  120. <TresMeshToonMaterial color="#FBB03B" />
  121. </TresMesh>
  122. <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
  123. <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
  124. <TresPlaneGeometry :args="[10, 10, 10, 10]" />
  125. <TresMeshToonMaterial />
  126. </TresMesh>
  127. <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
  128. </TresScene>
  129. </TresCanvas>
  130. </template>