Update grammar and three.js styling

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

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/[email protected]/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/[email protected]/build/three.module.js)
 - VueJS **3.2.20** (https://unpkg.com/[email protected]/dist/vue.esm-browser.prod.js)
 :::
 

src/guide/core/camera.md

@@ -51,15 +51,15 @@ 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 :
+You should set a *ref* on the camera:
 
 ```html
 <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;

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>

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 ThreeJS 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

src/guide/core/renderer.md

@@ -45,18 +45,18 @@ 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>
     <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
@@ -180,25 +180,25 @@ renderer.onInit(() => {
 })
 ```
 
-## Access ThreeJS renderer
+## Access three.js renderer
 
-You should set a *ref* on the renderer :
+You should set a *ref* on the renderer:
 
 ```html
 <Renderer ref="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:
 

src/guide/core/scene.md

@@ -23,17 +23,17 @@ 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 :
+You should set a *ref* on the scene:
 
 ```html
 <Scene ref="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;

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;">

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
 

src/guide/faq.md

@@ -1,24 +1,24 @@
 # FAQ
 
-### Is it really useful ?
+### Is it really useful?
 
 Building a scene with TroisJS is really handy, especially with VueJS and ViteJS HMR.
 
 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
 

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.

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>
@@ -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*.
+*Trois* is a french word; it means *Three*.

src/guide/install.md

@@ -6,19 +6,19 @@ 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)
 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

src/guide/lights/index.md

@@ -1,15 +1,15 @@
 # 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), [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 :
+Example:
 
 ```html
 <PointLight color="#ffffff" :intensity="0.5" />
@@ -33,15 +33,15 @@ Example :
 </tbody>
 </table>
 
-### Access ThreeJS light
+### 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 your three.js light in your component script:
 
 ```js
 const light = this.$ref.light.light;

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