docs: your first scene

docs/.vitepress/theme/components/EmbedExperiment.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+defineProps<{
+  url: string
+}>()
+</script>
+<template>
+  <iframe
+    frameborder="0"
+    class="w-full aspect-video border-inset-0 b-1 b-gray-500 border-opacity-50 rounded"
+    src="https://playground.tresjs.org/experiments/tres-donut/"
+  />
+</template>

docs/.vitepress/theme/index.ts

@@ -2,7 +2,7 @@ import 'uno.css'
 // .vitepress/theme/index.ts
 import DefaultTheme from 'vitepress/theme'
 import './config.css'
-import FirstScene from './components/FirstScene.vue'
+import EmbedExperiment from './components/EmbedExperiment.vue'
 
 import StackBlitzEmbed from './components/StackBlitzEmbed.vue'
 import TresLayout from './TresLayout.vue'
@@ -12,8 +12,8 @@ export default {
 
   enhanceApp(ctx) {
     DefaultTheme.enhanceApp(ctx)
-    ctx.app.component('FirstScene', FirstScene)
     ctx.app.component('StackBlitzEmbed', StackBlitzEmbed)
+    ctx.app.component('EmbedExperiment', EmbedExperiment)
   },
   Layout: TresLayout,
   /* Layout() {

docs/guide/your-first-scene.md

@@ -4,13 +4,15 @@ This guide will help you to create your first Tres scene. 🍩
 
 ## Setting up the experience Canvas
 
-Before we can create an Scene, we need somewhere to display it. Using plain [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) we would need to create a `canvas` html element to mount the `WebglRenderer` and initialize the `scene`
+Before we can create a Scene, we need somewhere to display it. Using plain [ThreeJS](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) we would need to create a `canvas` HTML element to mount the `WebglRenderer` and initialize the `scene`
 
 With **TresJS** you only need to add the default component `<TresCanvas />` to the template of your Vue component.
 
 ```vue
 <template>
-  <TresCanvas> // Your scene is going to live here </TresCanvas>
+  <TresCanvas>
+    <!-- Your scene goes here -->
+  </TresCanvas>
 </template>
 ```
 
@@ -25,20 +27,19 @@ The `TresCanvas` component is going to do some setup work behind the scene:
 
 ## Creating a scene
 
-We need 3 core elements to create a 3D experience:
+We need 4 core elements to create a 3D experience:
 
+- An [**Scene**](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene) to hold the camera and the object(s) together.
+- An [**Renderer**](https://threejs.org/docs/index.html?q=renderer#api/en/renderers/WebGLRenderer) to render the scene into the DOM.
 - A [**Camera**](https://threejs.org/docs/index.html?q=camera#api/en/cameras/Camera)
 - An [**Object**](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D)
-- An [**Scene**](https://threejs.org/docs/index.html?q=scene#api/en/scenes/Scene) to hold the camera and the object(s) together.
 
-With **TresJS** you can create a Scene using the `<TresScene />` component.
+With **TresJS** you only need to add the `<TresCanvas />` component to the template of your Vue component and it will automatically create a `Renderer` (`canvas` DOM Element) and `Scene` for you.
 
 ```vue
 <template>
   <TresCanvas>
-    <TresScene>
-      <!-- Your scene goes here -->
-    </TresScene>
+    <!-- Your scene goes here -->
   </TresCanvas>
 </template>
 ```
@@ -49,16 +50,13 @@ Then you can add a [**PerspectiveCamera**](https://threejs.org/docs/index.html?q
 <template>
   <TresCanvas>
     <TresPerspectiveCamera />
-    <TresScene>
-      <!-- Your scene goes here -->
-    </TresScene>
   </TresCanvas>
 </template>
 ```
 
-## Adding a Sphere
+## Adding a 🍩
 
-That scene looks a litle empty, let's add a basic object. If we where using plain **ThreeJS** we would need to create a [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) object and attach to it a [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) and a [**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) like this:
+That scene looks a little empty, let's add a basic object. If we where using plain **ThreeJS** we would need to create a [**Mesh**](https://threejs.org/docs/index.html?q=mesh#api/en/objects/Mesh) object and attach to it a [**Material**](https://threejs.org/docs/index.html?q=material#api/en/materials/Material) and a [**Geometry**](https://threejs.org/docs/index.html?q=geometry#api/en/core/BufferGeometry) like this:
 
 ```ts
 const geometry = new THREE.TorusGeometry(1, 0.5, 16, 32)
@@ -67,7 +65,7 @@ const donut = new THREE.Mesh(geometry, material)
 scene.add(donut)
 ```
 
-A Mesh is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.
+A **Mesh** is a basic scene object in three.js, and it's used to hold the geometry and the material needed to represent a shape in 3D space.
 
 Now let's see how we can easily achieve the same with **TresJS**. To do that we are going to use `<TresMesh />` component, and between the default slots, we are going to pass a `<TresTorusGeometry />` and a `<TresMeshBasicMaterial />`.
 
@@ -75,20 +73,18 @@ Now let's see how we can easily achieve the same with **TresJS**. To do that we
 <template>
   <TresCanvas>
     <TresPerspectiveCamera />
-    <TresScene>
-      <TresMesh>
-        <TresTorusGeometry />
-        <TresMeshBasicMaterial color="orange" />
-      </TresMesh>
-    </TresScene>
+    <TresMesh>
+      <TresTorusGeometry />
+      <TresMeshBasicMaterial color="orange" />
+    </TresMesh>
   </TresCanvas>
 </template>
 ```
 
 ::: info
-Notice that we don't need to import anything, thats because **TresJS** automatically generate a **Vue Component based of the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use a `AmbientLight` you would use `<TresAmbientLight />` component.
+Notice that we don't need to import anything, that's because **TresJS** automatically generate a **Vue Component based on the Three Object you want to use in CamelCase with a Tres prefix**. For example, if you want to use an `AmbientLight` you would use `<TresAmbientLight />` component.
 :::
 
-<FirstScene />
+<EmbedExperiment src="https://playground.tresjs.org/experiments/tres-donut/" />
 
 From here onwards you can start adding more objects to your scene and start playing with the properties of the components to see how they affect the scene.