From 7b5c397e9662b3d0e1654c13356b8bc1a855894a Mon Sep 17 00:00:00 2001
From: Logan Clark <logan.clark@mymail.champlain.edu>
Date: Fri, 11 Apr 2025 15:16:45 -0400
Subject: [PATCH 1/3] Update threejs to three.js and fix grammatical issues.

---
 src/guide/cdn.md               |  6 +++---
 src/guide/core/camera.md       |  4 ++--
 src/guide/core/raf.md          |  2 +-
 src/guide/core/renderer.md     | 12 ++++++------
 src/guide/core/scene.md        |  4 ++--
 src/guide/extras/index.md      |  2 +-
 src/guide/faq.md               | 16 +++++++--------
 src/guide/hmr.md               |  2 +-
 src/guide/index.md             |  2 +-
 src/guide/lights/index.md      | 14 ++++++-------
 src/guide/materials/index.md   | 24 +++++++++++------------
 src/guide/meshes/events.md     |  2 +-
 src/guide/meshes/geometries.md | 34 ++++++++++++++++----------------
 src/guide/meshes/groups.md     |  2 +-
 src/guide/meshes/index.md      | 36 +++++++++++++++++-----------------
 src/index.md                   |  4 ++--
 16 files changed, 83 insertions(+), 83 deletions(-)

diff --git a/src/guide/cdn.md b/src/guide/cdn.md
index 8b4cdcf7..fd5ef5d9 100644
--- a/src/guide/cdn.md
+++ b/src/guide/cdn.md
@@ -2,9 +2,9 @@
 
 You can import TroisJS as a CDN package (take a look at these [codepen examples](https://codepen.io/collection/AxoWoz)).
 
-::: warning ThreeJS/VueJS versions (TroisJS 0.3.3)
-If you need to import things from ThreeJS/VueJS, you should use :
-- ThreeJS **0.134.0** (https://cdn.skypack.dev/three@0.134.0/build/three.module.js)
+::: warning three.js/VueJS versions (TroisJS 0.3.3)
+If you need to import things from three.js/VueJS, you should use :
+- three.js **0.134.0** (https://cdn.skypack.dev/three@0.134.0/build/three.module.js)
 - VueJS **3.2.20** (https://unpkg.com/vue@3.2.20/dist/vue.esm-browser.prod.js)
 :::
 
diff --git a/src/guide/core/camera.md b/src/guide/core/camera.md
index 9376b1ae..c4e03aae 100644
--- a/src/guide/core/camera.md
+++ b/src/guide/core/camera.md
@@ -51,7 +51,7 @@ See [PerspectiveCamera.ts](https://github.com/troisjs/trois/blob/master/src/core
   </tbody>
 </table>
 
-### Access ThreeJS camera
+### Access three.js camera
 
 You should set a *ref* on the camera :
 
@@ -59,7 +59,7 @@ You should set a *ref* on the camera :
 <Camera ref="camera" />
 ```
 
-You can then access ThreeJS camera in your component script :
+You can then access three.js camera in your component script :
 
 ```js
 const camera = this.$refs.camera.camera;
diff --git a/src/guide/core/raf.md b/src/guide/core/raf.md
index 4be23bfb..582156bd 100644
--- a/src/guide/core/raf.md
+++ b/src/guide/core/raf.md
@@ -3,7 +3,7 @@
 TroisJS launch a `requestAnimationFrame` loop to render the scene, you can use `onBeforeRender()` to execute your code before each frame.
 
 ::: warning
-The render loop usually runs at 60fps, don't use reactivity to update troisjs components, you should directly update ThreeJS objects.
+The render loop usually runs at 60fps, don't use reactivity to update troisjs components, you should directly update three.js objects.
 
 Please see why here : [proxy setter benchmark](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter).
 :::
diff --git a/src/guide/core/renderer.md b/src/guide/core/renderer.md
index 68b0f232..760e3453 100644
--- a/src/guide/core/renderer.md
+++ b/src/guide/core/renderer.md
@@ -45,7 +45,7 @@ See [Renderer.ts](https://github.com/troisjs/trois/blob/master/src/core/Renderer
     </tr>
     <tr>
       <td><code>orbitCtrl</code></td>
-      <td>Enable/disable OrbitControls. If value is an Object, it will be used to configure [OrbitControls](#access-threejs-orbitcontrols).</td>
+      <td>Enable/disable OrbitControls. If the value is an Object, it will be used to configure [OrbitControls](#access-threejs-orbitcontrols).</td>
       <td>Boolean, Object</td>
       <td>false</td>
     </tr>
@@ -180,7 +180,7 @@ renderer.onInit(() => {
 })
 ```
 
-## Access ThreeJS renderer
+## Access three.js renderer
 
 You should set a *ref* on the renderer :
 
@@ -190,15 +190,15 @@ You should set a *ref* on the renderer :
 </Renderer>
 ```
 
-You can then access ThreeJS renderer in your component script :
+You can then access three.js renderer in your component script :
 
 ```js
 const renderer = this.$refs.renderer.renderer;
 ```
 
-## Access ThreeJS OrbitControls
+## Access three.js OrbitControls
 
-In the same fashion you can access the renderer's `three` object which contains different functions to control the scene, amongst which is `cameraCtrl`, handling the ThreeJS `OrbitControls` settings
+In the same fashion you can access the renderer's `three` object which contains different functions to control the scene, amongst which is `cameraCtrl`, handling the three.js `OrbitControls` settings
 
 ```js
 const orbitCtrl = this.$refs.renderer.three.cameraCtrl;
@@ -226,7 +226,7 @@ orbitCtrl.addEventListener('end', () => {
 
 
 ### Properties, Methods
-You can apply all properties and methods in the same way as listed in the official [ThreeJS docs](https://threejs.org/docs/?q=orbit#examples/en/controls/OrbitControls)
+You can apply all properties and methods in the same way as listed in the official [three.js docs](https://threejs.org/docs/?q=orbit#examples/en/controls/OrbitControls)
 
 Example:
 
diff --git a/src/guide/core/scene.md b/src/guide/core/scene.md
index e0662b1f..f0dde275 100644
--- a/src/guide/core/scene.md
+++ b/src/guide/core/scene.md
@@ -23,7 +23,7 @@ See [Scene.ts](https://github.com/troisjs/trois/blob/master/src/core/Scene.ts) a
 If you need a transparent renderer, you should use `alpha` on the [renderer](renderer).
 :::
 
-### Access ThreeJS scene
+### Access three.js scene
 
 You should set a *ref* on the scene :
 
@@ -33,7 +33,7 @@ You should set a *ref* on the scene :
 </Scene>
 ```
 
-You can then access ThreeJS scene in your component script :
+You can then access three.js scene in your component script :
 
 ```js
 const scene = this.$refs.scene.scene;
diff --git a/src/guide/extras/index.md b/src/guide/extras/index.md
index 6d02f7b0..d4edbe0b 100644
--- a/src/guide/extras/index.md
+++ b/src/guide/extras/index.md
@@ -1,6 +1,6 @@
 # Components
 
-Extra components that require manual imports, like ThreeJS's Examples directory (see "Examples" section [here](https://threejs.org/docs/#manual/en/introduction/Installation)).
+Extra components that require manual imports, like three.js's Examples directory (see "Examples" section [here](https://threejs.org/docs/#manual/en/introduction/Installation)).
 
 ## GLTFViewer
 
diff --git a/src/guide/faq.md b/src/guide/faq.md
index efd207f8..696680b2 100644
--- a/src/guide/faq.md
+++ b/src/guide/faq.md
@@ -1,6 +1,6 @@
 # FAQ
 
-### Is it really useful ?
+### Is it really useful?
 
 Building a scene with TroisJS is really handy, especially with VueJS and ViteJS HMR.
 
@@ -8,17 +8,17 @@ Using template tags, or custom components, make your code easier to re-use.
 
 And you can easily handle events on meshes, use a physics engine, or add postprocessing effects...
 
-### Is there any limitations ?
+### Are there any limitations?
 
-No, you have access to ThreeJS renderer, scene...
+No, you have access to three.js renderer, scene, etc...
 
-### What about performances ?
+### What about performance?
 
-TroisJS is just a wrapper, it is not slower than ThreeJS (except if you use *reactivity* too much).
+TroisJS is just a wrapper. Therefore, it is not slower than three.js (except if you use *reactivity* too much).
 
-### How to *dispose* ThreeJS objects
+### How do you *dispose* of three.js objects?
 
-You don't have to (except if you have created the objects yourself), TroisJS will automatically *dispose* geometries, materials, textures, renderer, effect passes...
+You don't have to (except if you have created the objects yourself). TroisJS will automatically *dispose* geometries, materials, textures, renderer, effect passes, etc...
 
-Why it is important : https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects
+Why it is important: https://threejs.org/docs/#manual/en/introduction/How-to-dispose-of-objects
 
diff --git a/src/guide/hmr.md b/src/guide/hmr.md
index 4105a2e9..20b92b38 100644
--- a/src/guide/hmr.md
+++ b/src/guide/hmr.md
@@ -1,5 +1,5 @@
 # HMR
 
-Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects when you update a template or a prop**. This means the result in your browser will be automatically updated without reloading all the stuff. **This is really helpful when you are creating a TroisJS Scene**.
+Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update three.js objects when you update a template or a prop**. This means the result in your browser will be automatically updated without reloading all the stuff. **This is really helpful when you are creating a TroisJS Scene**.
 
 Most of the props are reactive, please take a look at components source to see exactly which ones.
diff --git a/src/guide/index.md b/src/guide/index.md
index f50a0ce0..65f4a1bb 100644
--- a/src/guide/index.md
+++ b/src/guide/index.md
@@ -1,4 +1,4 @@
-# ✨ ThreeJS + VueJS 3 + ViteJS ⚡
+# ✨ three.js + VueJS 3 + ViteJS ⚡
 
 <p>
   <a href="https://troisjs.github.io/little-planet/" target="_blank"><img src="/assets/screenshots/little-planet.jpg" style="width:30%; margin-right: 1%;" /></a>
diff --git a/src/guide/lights/index.md b/src/guide/lights/index.md
index d0a08504..861d7989 100644
--- a/src/guide/lights/index.md
+++ b/src/guide/lights/index.md
@@ -2,12 +2,12 @@
 
 You can easily create the following lights :
 
-- `AmbientLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/AmbientLight.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/lights/AmbientLight))
-- `DirectionalLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/DirectionalLight.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/lights/DirectionalLight))
-- `HemisphereLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/HemisphereLight.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/lights/HemisphereLight))
-- `PointLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/PointLight.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/lights/PointLight))
-- `RectAreaLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/RectAreaLight.ts), [threejs doc](https://threejs.org/docs/#api/en/lights/RectAreaLight))
-- `SpotLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/SpotLight.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/lights/SpotLight))
+- `AmbientLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/AmbientLight.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/lights/AmbientLight))
+- `DirectionalLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/DirectionalLight.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/lights/DirectionalLight))
+- `HemisphereLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/HemisphereLight.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/lights/HemisphereLight))
+- `PointLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/PointLight.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/lights/PointLight))
+- `RectAreaLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/RectAreaLight.ts), [three.js doc](https://threejs.org/docs/#api/en/lights/RectAreaLight))
+- `SpotLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/SpotLight.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/lights/SpotLight))
 
 Example :
 
@@ -33,7 +33,7 @@ Example :
 </tbody>
 </table>
 
-### Access ThreeJS light
+### Access three.js light
 
 You should set a *ref* on your light :
 
diff --git a/src/guide/materials/index.md b/src/guide/materials/index.md
index e7d81bb0..643cbb62 100644
--- a/src/guide/materials/index.md
+++ b/src/guide/materials/index.md
@@ -2,15 +2,15 @@
 
 You can easily create the following materials :
 
-- `BasicMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial))
-- `LambertMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/materials/MeshLambertMaterial))
-- `MatcapMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/MatcapMaterial.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/materials/MeshMatcapMaterial))
-- `PhongMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/materials/MeshPhongMaterial))
-- `PhysicalMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/materials/MeshPhysicalMaterial))
-- `ShaderMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/ShaderMaterial.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/materials/ShaderMaterial))
-- `StandardMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/materials/MeshStandardMaterial))
-- `SubSurfaceMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/SubSurfaceMaterial.ts), [threejs example](https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_subsurface_scattering.html))
-- `ToonMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [threejs doc](https://threejs.org/docs/index.html#api/en/materials/MeshToonMaterial))
+- `BasicMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial))
+- `LambertMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshLambertMaterial))
+- `MatcapMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/MatcapMaterial.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshMatcapMaterial))
+- `PhongMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshPhongMaterial))
+- `PhysicalMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshPhysicalMaterial))
+- `ShaderMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/ShaderMaterial.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/ShaderMaterial))
+- `StandardMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshStandardMaterial))
+- `SubSurfaceMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/SubSurfaceMaterial.ts), [three.js example](https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_subsurface_scattering.html))
+- `ToonMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshToonMaterial))
 
 Example :
 
@@ -35,7 +35,7 @@ Example :
 </tbody>
 </table>
 
-You can use `props` to easily customize threejs material, e.g. :
+You can use `props` to easily customize three.js material, e.g. :
 
 ```html
 <Box>
@@ -65,7 +65,7 @@ Here is an incomplete list of threejs material properties (to get the complete l
 </tbody>
 </table>
 
-### Access ThreeJS material
+### Access three.js material
 
 You should set a *ref* on your material :
 
@@ -73,7 +73,7 @@ You should set a *ref* on your material :
 <PhongMaterial ref="material" />
 ```
 
-You can then access ThreeJS material in your component script :
+You can then access three.js material in your component script :
 
 ```js
 const material = this.$ref.material.material;
diff --git a/src/guide/meshes/events.md b/src/guide/meshes/events.md
index e1f3ff98..51f413f5 100644
--- a/src/guide/meshes/events.md
+++ b/src/guide/meshes/events.md
@@ -3,7 +3,7 @@
 You can easily handle mouse or touch events on your meshes.
 
 ::: tip
-To be able to handle events on ThreeJS objects, TroisJS uses *raycasting*. 
+To be able to handle events on three.js objects, TroisJS uses *raycasting*. 
 
 Read more : https://threejs.org/docs/#api/en/core/Raycaster
 :::
diff --git a/src/guide/meshes/geometries.md b/src/guide/meshes/geometries.md
index eb2088b8..89ec6130 100644
--- a/src/guide/meshes/geometries.md
+++ b/src/guide/meshes/geometries.md
@@ -9,21 +9,21 @@ Instead using predefined meshes, you can create mesh with geometry like this :
 </Mesh>
 ```
 
-TroisJS includes all buffer geometries from ThreeJS :
+TroisJS includes all buffer geometries from three.js:
 
-- `BoxGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/BoxGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/BoxBufferGeometry))
-- `CircleGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/CircleGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/CircleBufferGeometry))
-- `ConeGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/ConeGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/ConeBufferGeometry))
-- `CylinderGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/CylinderGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/CylinderBufferGeometry))
-- `DodecahedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/DodecahedronGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/DodecahedronBufferGeometry))
-- `IcosahedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/IcosahedronGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/IcosahedronBufferGeometry))
-- `LatheGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/LatheGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/LatheBufferGeometry))
-- `OctahedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/OctahedronGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/OctahedronBufferGeometry))
-- `PlaneGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/PlaneGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/PlaneBufferGeometry))
-- `PolyhedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/PolyhedronGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/PolyhedronBufferGeometry))
-- `RingGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/RingGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/RingBufferGeometry))
-- `SphereGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/SphereGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/SphereBufferGeometry))
-- `TetrahedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/TetrahedronGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/TetrahedronBufferGeometry))
-- `TorusGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/TorusGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/TorusBufferGeometry))
-- `TorusKnotGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/TorusKnotGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/TorusKnotBufferGeometry))
-- `TubeGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/TubeGeometry.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/TubeBufferGeometry))
+- `BoxGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/BoxGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/BoxBufferGeometry))
+- `CircleGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/CircleGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/CircleBufferGeometry))
+- `ConeGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/ConeGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/ConeBufferGeometry))
+- `CylinderGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/CylinderGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/CylinderBufferGeometry))
+- `DodecahedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/DodecahedronGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/DodecahedronBufferGeometry))
+- `IcosahedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/IcosahedronGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/IcosahedronBufferGeometry))
+- `LatheGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/LatheGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/LatheBufferGeometry))
+- `OctahedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/OctahedronGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/OctahedronBufferGeometry))
+- `PlaneGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/PlaneGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/PlaneBufferGeometry))
+- `PolyhedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/PolyhedronGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/PolyhedronBufferGeometry))
+- `RingGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/RingGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/RingBufferGeometry))
+- `SphereGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/SphereGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/SphereBufferGeometry))
+- `TetrahedronGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/TetrahedronGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/TetrahedronBufferGeometry))
+- `TorusGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/TorusGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/TorusBufferGeometry))
+- `TorusKnotGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/TorusKnotGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/TorusKnotBufferGeometry))
+- `TubeGeometry` ([source](https://github.com/troisjs/trois/blob/master/src/geometries/TubeGeometry.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/TubeBufferGeometry))
diff --git a/src/guide/meshes/groups.md b/src/guide/meshes/groups.md
index 9d3c584a..d03554a7 100644
--- a/src/guide/meshes/groups.md
+++ b/src/guide/meshes/groups.md
@@ -13,4 +13,4 @@ You can easily create a mesh group:
 >This is almost identical to a mesh. Its purpose is to make working with groups of meshes syntactically clearer.
 
 ([source](https://github.com/troisjs/trois/blob/master/src/core/Group.ts),
-[threejs doc](https://threejs.org/docs/index.html?q=group#api/en/objects/Group))
+[three.js doc](https://threejs.org/docs/index.html?q=group#api/en/objects/Group))
diff --git a/src/guide/meshes/index.md b/src/guide/meshes/index.md
index 267d7120..0c9eaa77 100644
--- a/src/guide/meshes/index.md
+++ b/src/guide/meshes/index.md
@@ -10,22 +10,22 @@ You can easily create mesh :
 
 You can use the following meshes :
 
-- `Box` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Box.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/BoxBufferGeometry))
-- `Circle` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Circle.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/CircleBufferGeometry))
-- `Cone` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Cone.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/ConeBufferGeometry))
-- `Cylinder` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Cylinder.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/CylinderBufferGeometry))
-- `Dodecahedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Dodecahedron.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/DodecahedronBufferGeometry))
-- `Icosahedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Icosahedron.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/IcosahedronBufferGeometry))
-- `Lathe` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Lathe.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/LatheBufferGeometry))
-- `Octahedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Octahedron.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/OctahedronBufferGeometry))
-- `Plane` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Plane.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/PlaneBufferGeometry))
-- `Polyhedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Polyhedron.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/PolyhedronBufferGeometry))
-- `Ring` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Ring.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/RingBufferGeometry))
-- `Sphere` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Sphere.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/SphereBufferGeometry))
-- `Tetrahedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Tetrahedron.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/TetrahedronBufferGeometry))
-- `Torus` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Torus.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/TorusBufferGeometry))
-- `TorusKnot` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/TorusKnot.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/TorusKnotBufferGeometry))
-- `Tube` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Tube.ts), [threejs doc](https://threejs.org/docs/#api/en/geometries/TubeBufferGeometry))
+- `Box` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Box.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/BoxBufferGeometry))
+- `Circle` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Circle.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/CircleBufferGeometry))
+- `Cone` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Cone.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/ConeBufferGeometry))
+- `Cylinder` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Cylinder.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/CylinderBufferGeometry))
+- `Dodecahedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Dodecahedron.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/DodecahedronBufferGeometry))
+- `Icosahedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Icosahedron.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/IcosahedronBufferGeometry))
+- `Lathe` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Lathe.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/LatheBufferGeometry))
+- `Octahedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Octahedron.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/OctahedronBufferGeometry))
+- `Plane` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Plane.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/PlaneBufferGeometry))
+- `Polyhedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Polyhedron.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/PolyhedronBufferGeometry))
+- `Ring` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Ring.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/RingBufferGeometry))
+- `Sphere` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Sphere.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/SphereBufferGeometry))
+- `Tetrahedron` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Tetrahedron.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/TetrahedronBufferGeometry))
+- `Torus` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Torus.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/TorusBufferGeometry))
+- `TorusKnot` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/TorusKnot.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/TorusKnotBufferGeometry))
+- `Tube` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Tube.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/TubeBufferGeometry))
 
 # Common Props (see [Mesh.ts](https://github.com/troisjs/trois/blob/master/src/meshes/Mesh.ts))
 
@@ -62,7 +62,7 @@ To enable shadows, please read [Shadows](../shadows).
 </Box>
 ```
 
-### Access ThreeJS mesh
+### Access three.js mesh
 
 You should set a *ref* on your mesh :
 
@@ -70,7 +70,7 @@ You should set a *ref* on your mesh :
 <Box ref="box" />
 ```
 
-You can then access ThreeJS mesh in your component script :
+You can then access three.js mesh in your component script :
 
 ```js
 const mesh = this.$ref.box.mesh;
diff --git a/src/index.md b/src/index.md
index dafd714f..d99ae3c4 100644
--- a/src/index.md
+++ b/src/index.md
@@ -2,13 +2,13 @@
 home: true
 # heroImage: /assets/logo.svg
 heroText: TroisJS
-tagline: ✨ ThreeJS + VueJS 3 + ViteJS ⚡
+tagline: ✨ three.js + VueJS 3 + ViteJS ⚡
 actionText: Examples
 actionLink: /examples/demos/1
 altActionText: Documentation
 altActionLink: /guide/
 features:
-  - title: ✨ ThreeJS
+  - title: ✨ three.js
     details: The most popular WebGL library, with a good support on both desktop and mobile.
   - title: 🛠️ VueJS 3
     details: With TroisJS you can easily create 3D content for your website using VueJS components.

From c2481486b4c77b9fdfcf3f6c1736e9de4da78aa5 Mon Sep 17 00:00:00 2001
From: Logan Clark <logan.clark@mymail.champlain.edu>
Date: Fri, 11 Apr 2025 15:27:16 -0400
Subject: [PATCH 2/3] Fix grammar

---
 README.md                                   |  2 +-
 src/guide/core/camera.md                    |  4 ++--
 src/guide/core/index.md                     |  2 +-
 src/guide/core/raf.md                       |  6 ++---
 src/guide/core/renderer.md                  | 26 ++++++++++-----------
 src/guide/core/scene.md                     |  4 ++--
 src/guide/directives/v-for.md               |  2 +-
 src/guide/index.md                          |  2 +-
 src/guide/install.md                        | 12 +++++-----
 src/guide/lights/index.md                   |  8 +++----
 src/guide/materials/basic-material.md       |  2 +-
 src/guide/materials/index.md                | 12 +++++-----
 src/guide/materials/lambert-material.md     |  2 +-
 src/guide/materials/matcap-material.md      |  4 ++--
 src/guide/materials/phong-material.md       |  2 +-
 src/guide/materials/physical-material.md    |  2 +-
 src/guide/materials/shader-material.md      |  2 +-
 src/guide/materials/standard-material.md    |  2 +-
 src/guide/materials/sub-surface-material.md |  4 ++--
 src/guide/materials/toon-material.md        |  2 +-
 src/guide/meshes/events.md                  | 10 ++++----
 src/guide/meshes/geometries.md              |  2 +-
 src/guide/meshes/index.md                   | 10 ++++----
 src/guide/meshes/instanced.md               |  4 ++--
 src/guide/postprocessing/index.md           |  2 +-
 src/guide/shadows.md                        |  4 ++--
 26 files changed, 67 insertions(+), 67 deletions(-)

diff --git a/README.md b/README.md
index 934354e5..b60672f9 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 Examples and documentation for TroisJS
 
-Main repo : https://github.com/troisjs/trois
+Main repo: https://github.com/troisjs/trois
diff --git a/src/guide/core/camera.md b/src/guide/core/camera.md
index c4e03aae..3120ea85 100644
--- a/src/guide/core/camera.md
+++ b/src/guide/core/camera.md
@@ -53,13 +53,13 @@ See [PerspectiveCamera.ts](https://github.com/troisjs/trois/blob/master/src/core
 
 ### Access three.js camera
 
-You should set a *ref* on the camera :
+You should set a *ref* on the camera:
 
 ```html
 <Camera ref="camera" />
 ```
 
-You can then access three.js camera in your component script :
+You can then access three.js camera in your component script:
 
 ```js
 const camera = this.$refs.camera.camera;
diff --git a/src/guide/core/index.md b/src/guide/core/index.md
index a2ac8009..195dd4fb 100644
--- a/src/guide/core/index.md
+++ b/src/guide/core/index.md
@@ -1,6 +1,6 @@
 # Usage
 
-TroisJS needs a [`Renderer`](renderer), a [`Camera`](camera) and a [`Scene`](scene) :
+TroisJS needs a [`Renderer`](renderer), a [`Camera`](camera) and a [`Scene`](scene):
 
 ```vue
 <template>
diff --git a/src/guide/core/raf.md b/src/guide/core/raf.md
index 582156bd..95a916ee 100644
--- a/src/guide/core/raf.md
+++ b/src/guide/core/raf.md
@@ -1,11 +1,11 @@
 # Render loop
 
-TroisJS launch a `requestAnimationFrame` loop to render the scene, you can use `onBeforeRender()` to execute your code before each frame.
+TroisJS launches a `requestAnimationFrame` loop to render the scene. You can use `onBeforeRender()` to execute your code before each frame.
 
 ::: warning
-The render loop usually runs at 60fps, don't use reactivity to update troisjs components, you should directly update three.js objects.
+The render loop usually runs at 60fps so don't use reactivity to update troisjs components. Instead, you should directly update three.js objects.
 
-Please see why here : [proxy setter benchmark](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter).
+Please see why here: [proxy setter benchmark](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter).
 :::
 
 ```vue
diff --git a/src/guide/core/renderer.md b/src/guide/core/renderer.md
index 760e3453..d774095a 100644
--- a/src/guide/core/renderer.md
+++ b/src/guide/core/renderer.md
@@ -52,11 +52,11 @@ See [Renderer.ts](https://github.com/troisjs/trois/blob/master/src/core/Renderer
     <tr>
       <td><code>pointer</code></td>
       <td>
-        Listen for pointer events to track mouse or touch positions (2D and 3D). Use <code>renderer.three.pointer</code> to get :
+        Listen for pointer events to track mouse or touch positions (2D and 3D). Use <code>renderer.three.pointer</code> to get:
         <ul>
-          <li><code>position</code> : 2D position.</li>
-          <li><code>positionN</code> : nomalized position, can be used for raycasting.</li>
-          <li><code>'positionV3'</code> : 3D position.</li>
+          <li><code>position</code>: 2D position.</li>
+          <li><code>positionN</code>: nomalized position, can be used for raycasting.</li>
+          <li><code>'positionV3'</code>: 3D position.</li>
         </ul>
       </td>
       <td>Boolean, Object</td>
@@ -67,11 +67,11 @@ See [Renderer.ts](https://github.com/troisjs/trois/blob/master/src/core/Renderer
       <td>
         Resize canvas on window resize.
         <ul>
-          <li><code>false</code> : disabled</li>
-          <li><code>true</code> : parent size</li>
-          <li><code>'window'</code> : window size</li>
+          <li><code>false</code>: disabled</li>
+          <li><code>true</code>: parent size</li>
+          <li><code>'window'</code>: window size</li>
         </ul>
-        To directly set the size of the renderer you can call the built in three function:
+        To directly set the size of the renderer, you can call the built in three.js function:
         <code>this.$refs.renderer.three.setSize(width, height)</code>
       </td>
       <td>Boolean, String</td>
@@ -100,7 +100,7 @@ See [Renderer.ts](https://github.com/troisjs/trois/blob/master/src/core/Renderer
 
 ## Events API (v0.3)
 
-You can use the following functions to add/remove event listeners on Renderer component :
+You can use the following functions to add/remove event listeners on Renderer components:
 
 <table>
   <tbody>
@@ -148,7 +148,7 @@ You can use the following functions to add/remove event listeners on Renderer co
 </table>
 
 
-You can also use :
+You can also use:
 
 <table>
   <tbody>
@@ -169,7 +169,7 @@ You can also use :
 
 ## Custom render function
 
-You can use a custom render function :
+You can use a custom render function:
 
 ```js
 const renderer = this.$refs.renderer
@@ -182,7 +182,7 @@ renderer.onInit(() => {
 
 ## Access three.js renderer
 
-You should set a *ref* on the renderer :
+You should set a *ref* on the renderer:
 
 ```html
 <Renderer ref="renderer">
@@ -190,7 +190,7 @@ You should set a *ref* on the renderer :
 </Renderer>
 ```
 
-You can then access three.js renderer in your component script :
+You can then access three.js renderer in your component script:
 
 ```js
 const renderer = this.$refs.renderer.renderer;
diff --git a/src/guide/core/scene.md b/src/guide/core/scene.md
index f0dde275..cc0f9b37 100644
--- a/src/guide/core/scene.md
+++ b/src/guide/core/scene.md
@@ -25,7 +25,7 @@ If you need a transparent renderer, you should use `alpha` on the [renderer](ren
 
 ### Access three.js scene
 
-You should set a *ref* on the scene :
+You should set a *ref* on the scene:
 
 ```html
 <Scene ref="scene">
@@ -33,7 +33,7 @@ You should set a *ref* on the scene :
 </Scene>
 ```
 
-You can then access three.js scene in your component script :
+You can then access three.js scene in your component script:
 
 ```js
 const scene = this.$refs.scene.scene;
diff --git a/src/guide/directives/v-for.md b/src/guide/directives/v-for.md
index abfdd818..d129dbd9 100644
--- a/src/guide/directives/v-for.md
+++ b/src/guide/directives/v-for.md
@@ -1,6 +1,6 @@
 # v-for
 
-You can use `v-for` to easily create multiple components :
+You can use `v-for` to easily create multiple components:
 
 <ClientOnly>
   <div style="text-align:center;">
diff --git a/src/guide/index.md b/src/guide/index.md
index 65f4a1bb..5ecba2ea 100644
--- a/src/guide/index.md
+++ b/src/guide/index.md
@@ -19,4 +19,4 @@ I wanted to code something similar to *react-three-fiber* but for VueJS.
 
 I started from scratch, I will rewrite some of my [WebGL demos](https://codepen.io/collection/AGZywR) to see if this little toy can do the job.
 
-*Trois* is a french word, it means *Three*.
+*Trois* is a french word; it means *Three*.
diff --git a/src/guide/install.md b/src/guide/install.md
index 76e0ae1e..1f926e65 100644
--- a/src/guide/install.md
+++ b/src/guide/install.md
@@ -6,11 +6,11 @@ You don't need to install TroisJS to play with it, please read [how to use Trois
 
 ## New project
 
-Download :
+Download:
 - [TroisJS/ViteJS Starter App](https://raw.githubusercontent.com/troisjs/troisjs.github.io/HEAD/src/public/assets/troisjs.zip).
 - or [TroisJS/Typescript/ViteJS Starter App](https://raw.githubusercontent.com/troisjs/troisjs.github.io/HEAD/src/public/assets/troisjs-ts.zip).
 
-Unzip it, and :
+Unzip it, and:
 
 ```
 cd troisjs (or troisjs-ts)
@@ -18,7 +18,7 @@ npm install
 npm run dev
 ```
 
-Or :
+Or:
 
 ```
 cd troisjs (or troisjs-ts)
@@ -96,8 +96,8 @@ export default {
 
 ## Typescript
 
-TroisJS v0.3 has been rewritten using Typescript, if you want to have a good support :
+TroisJS v0.3 has been rewritten using Typescript. If you want to have a good support:
 
-- Use Visual Studio Code, with Volar extension : https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar
-- Read this : https://v3.vuejs.org/guide/typescript-support.html
+- Use Visual Studio Code, with Volar extension: https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar
+- Read this: https://v3.vuejs.org/guide/typescript-support.html
 - Don't use TroisJS plugin and import the components
diff --git a/src/guide/lights/index.md b/src/guide/lights/index.md
index 861d7989..098021cf 100644
--- a/src/guide/lights/index.md
+++ b/src/guide/lights/index.md
@@ -1,6 +1,6 @@
 # Lights (wip)
 
-You can easily create the following lights :
+You can easily create the following lights:
 
 - `AmbientLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/AmbientLight.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/lights/AmbientLight))
 - `DirectionalLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/DirectionalLight.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/lights/DirectionalLight))
@@ -9,7 +9,7 @@ You can easily create the following lights :
 - `RectAreaLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/RectAreaLight.ts), [three.js doc](https://threejs.org/docs/#api/en/lights/RectAreaLight))
 - `SpotLight` ([source](https://github.com/troisjs/trois/blob/master/src/lights/SpotLight.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/lights/SpotLight))
 
-Example :
+Example:
 
 ```html
 <PointLight color="#ffffff" :intensity="0.5" />
@@ -35,13 +35,13 @@ Example :
 
 ### Access three.js light
 
-You should set a *ref* on your light :
+You should set a *ref* on your light:
 
 ```html
 <PointLight ref="light" />
 ```
 
-You can then access ThreeJS light in your component script :
+You can then access ThreeJS light in your component script:
 
 ```js
 const light = this.$ref.light.light;
diff --git a/src/guide/materials/basic-material.md b/src/guide/materials/basic-material.md
index 40dd59ba..b753c06b 100644
--- a/src/guide/materials/basic-material.md
+++ b/src/guide/materials/basic-material.md
@@ -8,4 +8,4 @@ Creates a [THREE.MeshBasicMaterial](https://threejs.org/docs/#api/en/materials/M
 </Box>
 ```
 
-Source : https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
+Source: https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
diff --git a/src/guide/materials/index.md b/src/guide/materials/index.md
index 643cbb62..ae2bd469 100644
--- a/src/guide/materials/index.md
+++ b/src/guide/materials/index.md
@@ -1,6 +1,6 @@
 # Materials
 
-You can easily create the following materials :
+You can easily create the following materials:
 
 - `BasicMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial))
 - `LambertMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshLambertMaterial))
@@ -12,7 +12,7 @@ You can easily create the following materials :
 - `SubSurfaceMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/SubSurfaceMaterial.ts), [three.js example](https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_subsurface_scattering.html))
 - `ToonMaterial` ([source](https://github.com/troisjs/trois/blob/master/src/materials/Material.ts), [three.js doc](https://threejs.org/docs/index.html#api/en/materials/MeshToonMaterial))
 
-Example :
+Example:
 
 ```html
 <Box>
@@ -35,7 +35,7 @@ Example :
 </tbody>
 </table>
 
-You can use `props` to easily customize three.js material, e.g. :
+You can use `props` to easily customize three.js material, e.g.:
 
 ```html
 <Box>
@@ -43,7 +43,7 @@ You can use `props` to easily customize three.js material, e.g. :
 </Box>
 ```
 
-Here is an incomplete list of threejs material properties (to get the complete list please read https://threejs.org/docs/#api/en/materials/Material) :
+Here is an incomplete list of threejs material properties (to get the complete list please read https://threejs.org/docs/#api/en/materials/Material):
 
 <table>
 <tbody>
@@ -67,13 +67,13 @@ Here is an incomplete list of threejs material properties (to get the complete l
 
 ### Access three.js material
 
-You should set a *ref* on your material :
+You should set a *ref* on your material:
 
 ```html
 <PhongMaterial ref="material" />
 ```
 
-You can then access three.js material in your component script :
+You can then access three.js material in your component script:
 
 ```js
 const material = this.$ref.material.material;
diff --git a/src/guide/materials/lambert-material.md b/src/guide/materials/lambert-material.md
index d2a03357..c8ba42ba 100644
--- a/src/guide/materials/lambert-material.md
+++ b/src/guide/materials/lambert-material.md
@@ -8,4 +8,4 @@ Creates a [THREE.MeshLambertMaterial](https://threejs.org/docs/#api/en/materials
 </Box>
 ```
 
-Source : https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
+Source: https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
diff --git a/src/guide/materials/matcap-material.md b/src/guide/materials/matcap-material.md
index ecd9f29f..e163e437 100644
--- a/src/guide/materials/matcap-material.md
+++ b/src/guide/materials/matcap-material.md
@@ -10,11 +10,11 @@ Creates a [THREE.MeshMatcapMaterial](https://threejs.org/docs/#api/en/materials/
 
 You can use the name of any of [these](https://github.com/emmelleppi/matcaps) matcaps in the `name` prop. Click on a matcap image, then copy the name you'd like to use.
 
-Source : https://github.com/troisjs/trois/blob/master/src/materials/MatcapMaterial.ts
+Source: https://github.com/troisjs/trois/blob/master/src/materials/MatcapMaterial.ts
 
 ### Props
 
-Inherits all [base props](./#props) and accepts the following :
+Inherits all [base props](./#props) and accepts the following:
 
 <table>
 <tbody>
diff --git a/src/guide/materials/phong-material.md b/src/guide/materials/phong-material.md
index cc440840..a1cddf77 100644
--- a/src/guide/materials/phong-material.md
+++ b/src/guide/materials/phong-material.md
@@ -8,4 +8,4 @@ Creates a [THREE.MeshPhongMaterial](https://threejs.org/docs/#api/en/materials/M
 </Box>
 ```
 
-Source : https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
+Source: https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
diff --git a/src/guide/materials/physical-material.md b/src/guide/materials/physical-material.md
index c1c93f9f..9acee944 100644
--- a/src/guide/materials/physical-material.md
+++ b/src/guide/materials/physical-material.md
@@ -8,4 +8,4 @@ Creates a [THREE.MeshPhysicalMaterial](https://threejs.org/docs/#api/en/material
 </Box>
 ```
 
-Source : https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
+Source: https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
diff --git a/src/guide/materials/shader-material.md b/src/guide/materials/shader-material.md
index 50920a99..9f34d05a 100644
--- a/src/guide/materials/shader-material.md
+++ b/src/guide/materials/shader-material.md
@@ -8,7 +8,7 @@ Creates a [THREE.ShaderMaterial](https://threejs.org/docs/#api/en/materials/Shad
 </Box>
 ```
 
-Source : https://github.com/troisjs/trois/blob/master/src/materials/ShaderMaterial.ts
+Source: https://github.com/troisjs/trois/blob/master/src/materials/ShaderMaterial.ts
 
 ### Props
 
diff --git a/src/guide/materials/standard-material.md b/src/guide/materials/standard-material.md
index 4dc6d102..2bd2d1d9 100644
--- a/src/guide/materials/standard-material.md
+++ b/src/guide/materials/standard-material.md
@@ -8,4 +8,4 @@ Creates a [THREE.MeshStandardMaterial](https://threejs.org/docs/#api/en/material
 </Box>
 ```
 
-Source : https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
+Source: https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
diff --git a/src/guide/materials/sub-surface-material.md b/src/guide/materials/sub-surface-material.md
index db9c1aa8..04995f62 100644
--- a/src/guide/materials/sub-surface-material.md
+++ b/src/guide/materials/sub-surface-material.md
@@ -10,11 +10,11 @@ This material is an implementation of the [shader material](./shader-material) u
 </Box>
 ```
 
-Source : https://github.com/troisjs/trois/blob/master/src/materials/SubSurfaceMaterial.ts
+Source: https://github.com/troisjs/trois/blob/master/src/materials/SubSurfaceMaterial.ts
 
 ### `uniform` Prop
 
-You can use the `uniform` prop to customize this material, e.g. :
+You can use the `uniform` prop to customize this material, e.g.:
 
 ```html
 <Box>
diff --git a/src/guide/materials/toon-material.md b/src/guide/materials/toon-material.md
index 16145d33..33bf4579 100644
--- a/src/guide/materials/toon-material.md
+++ b/src/guide/materials/toon-material.md
@@ -8,5 +8,5 @@ Creates a [THREE.MeshToonMaterial](https://threejs.org/docs/#api/en/materials/Me
 </Box>
 ```
 
-Source : https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
+Source: https://github.com/troisjs/trois/blob/master/src/materials/Material.ts
 
diff --git a/src/guide/meshes/events.md b/src/guide/meshes/events.md
index 51f413f5..842ee205 100644
--- a/src/guide/meshes/events.md
+++ b/src/guide/meshes/events.md
@@ -5,7 +5,7 @@ You can easily handle mouse or touch events on your meshes.
 ::: tip
 To be able to handle events on three.js objects, TroisJS uses *raycasting*. 
 
-Read more : https://threejs.org/docs/#api/en/core/Raycaster
+Read more: https://threejs.org/docs/#api/en/core/Raycaster
 :::
 
 ## Mesh Events
@@ -53,7 +53,7 @@ You can use the following props to handle events on a *Mesh* or *InstancedMesh*:
   </tbody>
 </table>
 
-Example :
+Example:
 
 ```vue
 <template>
@@ -90,7 +90,7 @@ export default {
 
 ## Raycaster Component
 
-If you need to easily handle pointer events on all your scene's meshes, you can use `Raycaster` component :
+If you need to easily handle pointer events on all your scene's meshes, you can use `Raycaster` component:
 
 ```vue
 <template>
@@ -130,7 +130,7 @@ export default {
 
 By default, raycasting will be made on pointer move, but it can be useful to do the same on every frame.
 
-If using mesh events, you should set `pointer` prop on `Renderer` :
+If using mesh events, you should set `pointer` prop on `Renderer`:
 
 ```html
 <Renderer :pointer="{ intersectMode: 'frame' }">
@@ -138,7 +138,7 @@ If using mesh events, you should set `pointer` prop on `Renderer` :
 </Renderer>
 ```
 
-If using `Raycaster` component, you should set `intersect-mode` prop :
+If using `Raycaster` component, you should set `intersect-mode` prop:
 
 ```html
 <Raycaster intersect-mode="frame" />
diff --git a/src/guide/meshes/geometries.md b/src/guide/meshes/geometries.md
index 89ec6130..3b6ca787 100644
--- a/src/guide/meshes/geometries.md
+++ b/src/guide/meshes/geometries.md
@@ -1,6 +1,6 @@
 # Using Geometries
 
-Instead using predefined meshes, you can create mesh with geometry like this :
+Instead of using predefined meshes, you can create meshes with geometry like this:
 
 ```html
 <Mesh>
diff --git a/src/guide/meshes/index.md b/src/guide/meshes/index.md
index 0c9eaa77..939b5339 100644
--- a/src/guide/meshes/index.md
+++ b/src/guide/meshes/index.md
@@ -1,6 +1,6 @@
 # Meshes
 
-You can easily create mesh :
+You can easily create a mesh:
 
 ```html
 <Box :size="1" :position="{ x: 10, y: 0, z: 0 }">
@@ -8,7 +8,7 @@ You can easily create mesh :
 </Box>
 ```
 
-You can use the following meshes :
+You can use the following meshes:
 
 - `Box` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Box.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/BoxBufferGeometry))
 - `Circle` ([source](https://github.com/troisjs/trois/blob/master/src/meshes/Circle.ts), [three.js doc](https://threejs.org/docs/#api/en/geometries/CircleBufferGeometry))
@@ -48,7 +48,7 @@ You can use the following meshes :
 
 To enable shadows, please read [Shadows](../shadows).
 
-### Example :
+### Example:
 
 ```html
 <Box
@@ -64,13 +64,13 @@ To enable shadows, please read [Shadows](../shadows).
 
 ### Access three.js mesh
 
-You should set a *ref* on your mesh :
+You should set a *ref* on your mesh:
 
 ```html
 <Box ref="box" />
 ```
 
-You can then access three.js mesh in your component script :
+You can then access three.js mesh in your component script:
 
 ```js
 const mesh = this.$ref.box.mesh;
diff --git a/src/guide/meshes/instanced.md b/src/guide/meshes/instanced.md
index 04d60dcb..17438628 100644
--- a/src/guide/meshes/instanced.md
+++ b/src/guide/meshes/instanced.md
@@ -2,7 +2,7 @@
 
 See [InstancedMesh.ts](https://github.com/troisjs/trois/blob/master/src/meshes/InstancedMesh.ts) and [THREE.InstancedMesh](https://threejs.org/docs/index.html#api/en/objects/InstancedMesh).
 
-Example :
+Example:
 
 ```html
 <InstancedMesh ref="imesh" :count="500">
@@ -11,7 +11,7 @@ Example :
 </InstancedMesh>
 ```
 
-You can then init instance matrix in your component script :
+You can then init instance matrix in your component script:
 
 ```js
 const imesh = this.$refs.imesh.mesh;
diff --git a/src/guide/postprocessing/index.md b/src/guide/postprocessing/index.md
index 09e94a1e..9372e903 100644
--- a/src/guide/postprocessing/index.md
+++ b/src/guide/postprocessing/index.md
@@ -2,7 +2,7 @@
 
 You can use `EffectComposer` ([source](https://github.com/troisjs/trois/blob/master/src/effects/EffectComposer.ts)) to easily add post processing effects.
 
-Passes :
+Passes:
 
 - `BokehPass` ([source](https://github.com/troisjs/trois/blob/master/src/effects/BokehPass.ts))
 - `FilmPass` ([source](https://github.com/troisjs/trois/blob/master/src/effects/FilmPass.ts))
diff --git a/src/guide/shadows.md b/src/guide/shadows.md
index 6d519bf0..0c1bf779 100644
--- a/src/guide/shadows.md
+++ b/src/guide/shadows.md
@@ -1,12 +1,12 @@
 # Shadows
 
-To enable shadows :
+To enable shadows:
 
 - set `shadow` on `Renderer`,
 - set `cast-shadow` on light,
 - set `cast-shadow`/`receive-shadow` on mesh.
 
-Example :
+Example
 
 ```html
 <Renderer shadow>

From 7250a1284b6ea77213b6900dfa07310bb94afbbe Mon Sep 17 00:00:00 2001
From: Logan Clark <logan.clark@mymail.champlain.edu>
Date: Fri, 11 Apr 2025 15:28:46 -0400
Subject: [PATCH 3/3] Update grammar

---
 src/guide/index.md        | 2 +-
 src/guide/lights/index.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/guide/index.md b/src/guide/index.md
index 5ecba2ea..f4e386a3 100644
--- a/src/guide/index.md
+++ b/src/guide/index.md
@@ -17,6 +17,6 @@
 
 I wanted to code something similar to *react-three-fiber* but for VueJS.
 
-I started from scratch, I will rewrite some of my [WebGL demos](https://codepen.io/collection/AGZywR) to see if this little toy can do the job.
+I started from scratch and I will rewrite some of my [WebGL demos](https://codepen.io/collection/AGZywR) to see if this little toy can do the job.
 
 *Trois* is a french word; it means *Three*.
diff --git a/src/guide/lights/index.md b/src/guide/lights/index.md
index 098021cf..063f424f 100644
--- a/src/guide/lights/index.md
+++ b/src/guide/lights/index.md
@@ -41,7 +41,7 @@ You should set a *ref* on your light:
 <PointLight ref="light" />
 ```
 
-You can then access ThreeJS light in your component script:
+You can then access your three.js light in your component script:
 
 ```js
 const light = this.$ref.light.light;