From ab4118cc51bcba75a0641cebc711f7c8a99f2426 Mon Sep 17 00:00:00 2001
From: Kevin Levron <kevin.levron@gmail.com>
Date: Tue, 15 Sep 2020 15:24:47 +0200
Subject: [PATCH] update readme

---
 README.md | 56 +++++++++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 52 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index e113009..a324084 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,10 @@
 
 I wanted to try to write a lib similar to [react-three-fiber](https://github.com/react-spring/react-three-fiber) but for VueJS.
 
+I started from scratch, 
+
+Demos : https://troisjs.github.io/trois/
+
 ## PoC
 
 I first made a simple *Proof of Concept*, take a look at [Test1.vue](/src/components/Test1.vue) :
@@ -9,10 +13,8 @@ I first made a simple *Proof of Concept*, take a look at [Test1.vue](/src/compon
 ```html
   <Renderer>
     <PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera>
-
-    <PhongMaterial name="material1" color="#ff0000"></PhongMaterial>
-    <LambertMaterial name="material2" color="#0000ff"></LambertMaterial>
-
+    <PhongMaterial id="material1" color="#ff0000"></PhongMaterial>
+    <LambertMaterial id="material2" color="#0000ff"></LambertMaterial>
     <Scene>
       <PointLight :position="{ y: 50, z: 50 }"></PointLight>
       <Box ref="box" :size="10" material="material1"></Box>
@@ -21,6 +23,52 @@ I first made a simple *Proof of Concept*, take a look at [Test1.vue](/src/compon
   </Renderer>
 ```
 
+## InstancedMesh
+
+Take a look at [Test3.vue](/src/components/Test3.vue).
+
+### Template
+
+```html
+<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
+  <Camera :position="{ z: 100 }"></Camera>
+  <PhongMaterial id="material" color="#ffffff"></PhongMaterial>
+  <Scene id="scene1">
+    <PointLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></PointLight>
+    <PointLight color="#ff0000" :intensity="0.5" :position="{ y: -50, z: 50 }"></PointLight>
+    <InstancedMesh ref="imesh" material="material" :count="1000">
+      <SphereGeometry :radius="2"></SphereGeometry>
+    </InstancedMesh>
+  </Scene>
+</Renderer>
+```
+
+### Script : init instanceMatrix
+
+```js
+const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
+const imesh = this.$refs.imesh.mesh;
+const dummy = new Object3D();
+for (let i = 0; i < 1000; i++) {
+  dummy.position.set(rndFS(100), rndFS(100), rndFS(100));
+  const scale = rnd(0.2, 1);
+  dummy.scale.set(scale, scale, scale);
+  dummy.updateMatrix();
+  imesh.setMatrixAt(i, dummy.matrix);
+}
+imesh.instanceMatrix.needsUpdate = true;
+```
+
+## GTLF
+
+Take a look at [TestGLTF.vue](/src/components/TestGLTF.vue).
+
+```html
+<GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
+  <AmbientLight></AmbientLight>
+</GLTFViewer>
+```
+
 ## Test
 
     git clone https://github.com/troisjs/trois