FirstScene.vue 664 B

12345678910111213141516171819202122232425
  1. <script setup lang="ts">
  2. import { OrbitControls } from '@tresjs/cientos'
  3. const styles = {
  4. width: '100%',
  5. height: '550px',
  6. border: '1px solid #e2e2e2',
  7. borderRadius: '8px',
  8. overflow: 'hidden',
  9. }
  10. </script>
  11. <template>
  12. <ClientOnly>
  13. <TresCanvas shadows clear-color="#fff" :style="styles">
  14. <TresPerspectiveCamera :position="[0, 2, 4]" />
  15. <OrbitControls />
  16. <TresScene>
  17. <TresMesh :rotation="[-Math.PI / 4, -Math.PI / 4, Math.PI / 4]">
  18. <TresTorusGeometry :args="[1, 0.5, 16, 32]" />
  19. <TresMeshBasicMaterial color="#FBB03B" />
  20. </TresMesh>
  21. </TresScene>
  22. </TresCanvas>
  23. </ClientOnly>
  24. </template>