docs: 577 tres docs cookbook orbit controls code throws error

[alvarosabu]

Closes #577

[netlify]

✅ Deploy Preview for tresjs-docs ready!

Name	Link
🔨 Latest commit	51aa354
🔍 Latest deploy log	https://app.netlify.com/sites/tresjs-docs/deploys/65e9f7c1cf5af70008d64821
😎 Deploy Preview	https://deploy-preview-580--tresjs-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[alvarosabu]

Hi, @Tinoooo or @DennisSmuda could you please help me out by applying the changes to the German de/cookbook/orbit-controls.md recipe?

Thanks 🙏🏻

[andretchen0]

@alvarosabu

Dude, you're fast like the wind these days!

Problem

Error on StackBlitz:

Uncaught SyntaxError: import not found: OrbitControls

That's thrown if I run the updated example code from the OrbitControls page of the deployment preview, here:

Solution

• TresCanvas needs to be imported
• OrbitControls needs to be default imported (no curly braces)

This works on StackBlitz for App.vue:

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core';
import OrbitControls from './OrbitControls.vue';
</script>

<template>
  <TresCanvas shadows alpha>
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <OrbitControls />
  </TresCanvas>
</template>

StackBlitz (with a TresMesh to show it's working.)

[alvarosabu]

@andretchen0 😂 and I'm sick, it must be the medicines haha

I guess I was putting the bare minimum of code to exemplify, but I see that in real life, most users would expect to copy the code directly and have it work right?. Great feedback, I will create another PR