TheExperiment.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. <script setup lang="ts">
  2. import { sRGBEncoding, BasicShadowMap, NoToneMapping } from 'three'
  3. import { TresCanvas } from '/@/'
  4. import { GLTFModel, OrbitControls } from '@tresjs/cientos'
  5. const state = reactive({
  6. clearColor: '#82DBC5',
  7. shadows: true,
  8. alpha: false,
  9. shadowMapType: BasicShadowMap,
  10. outputEncoding: sRGBEncoding,
  11. toneMapping: NoToneMapping,
  12. })
  13. const akuAkuRef = ref(null)
  14. watchEffect(() => {
  15. if (akuAkuRef.value) {
  16. const model = akuAkuRef.value.getModel().children[0]
  17. console.log('akuAkuRef', model)
  18. }
  19. })
  20. </script>
  21. <template>
  22. <TresCanvas v-bind="state">
  23. <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
  24. <OrbitControls make-default />
  25. <TresAmbientLight :intensity="0.5" />
  26. <Suspense>
  27. <GLTFModel
  28. ref="akuAkuRef"
  29. path="https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/aku-aku/AkuAku.gltf"
  30. draco
  31. />
  32. <!-- <AkuAku /> -->
  33. </Suspense>
  34. <TresAxesHelper />
  35. <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />
  36. </TresCanvas>
  37. </template>