Migrated Github Globe code to use tresjs#264
Conversation
|
Hi @alvarosabu, |
| :class="[props.class]" | ||
| > | ||
| <TresCanvas | ||
| class="h-full w-full" |
There was a problem hiding this comment.
@rahul-vashishtha the TresCanvas should take the container width and height automatically, I believe you do not need to add this classes.
alvarosabu
left a comment
alvarosabu
left a comment
There was a problem hiding this comment.
Hey @rahul-vashishtha I added some best practices comments that would make your life ways easier when implementing Tres.
Let me know if you have any questions
| }); | ||
|
|
||
| const handleCanvasReady = (context: TresContext) => { | ||
| tresContext.value = context; |
There was a problem hiding this comment.
@rahul-vashishtha Although is technically possible to access the context this way, we recommend splitting complex scenes which require access to the context this way:
- Parent -> ui/github-globe/index.vue
<TresCanvas>
<GithubGloveExperience />
</TresCanvas>
- Children-> ui/github-globe/Experience.vue
<script setup lang="ts">
const { camera } = useTres()
console.log(camera) // useTres returns the active camera
</script>
....
https://docs.tresjs.org/api/composables/use-tres#usage
This way the children have complete access to the composables like useLoop, useTres and all the ones depending to the context
| if (!activeCamera) return; | ||
|
|
||
| const instance = context.renderer.instance; | ||
| const orbitControls = new OrbitControls(activeCamera, instance.domElement); |
There was a problem hiding this comment.
You can use <OrbitControls /> from the cientos package https://cientos.tresjs.org/guide/controls/orbit-controls.html#orbitcontrols
| lat: arc.endLat, | ||
| lng: arc.endLng, | ||
| }); | ||
| function setupLoop(context: TresContext) { |
There was a problem hiding this comment.
Related to the comment above about the parent child approach, that way you can avoid all this setup and just use useLoop directly on the children.
2 participants
This PR contains the migration of Github Globe to Tresjs.
This is the first step in improving the Inspira UI threejs DX and integrating it tightly with Vue ecosystem.
Looking forward for the review from the community.