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 - - - - + + @@ -21,6 +23,52 @@ I first made a simple *Proof of Concept*, take a look at [Test1.vue](/src/compon ``` +## InstancedMesh + +Take a look at [Test3.vue](/src/components/Test3.vue). + +### Template + +```html + + + + + + + + + + + +``` + +### 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 + + + +``` + ## Test git clone https://github.com/troisjs/trois