Web3D/trois
1
0
Fork 0
mirror of https://github.com/troisjs/trois.git synced 2024-11-24 04:12:02 +08:00
Code Issues Projects Releases Wiki Activity

update readme

Browse Source
This commit is contained in:
Kevin Levron 2020-09-15 15:24:47 +02:00
parent 24d478e8f3
commit ab4118cc51
1 changed files with 52 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
README.md
View File

@ -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 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 ## PoC
I first made a simple *Proof of Concept*, take a look at [Test1.vue](/src/components/Test1.vue) : 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 ```html
<Renderer> <Renderer>
<PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera> <PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera>
<PhongMaterial id="material1" color="#ff0000"></PhongMaterial>
<PhongMaterial name="material1" color="#ff0000"></PhongMaterial> <LambertMaterial id="material2" color="#0000ff"></LambertMaterial>
<LambertMaterial name="material2" color="#0000ff"></LambertMaterial>
<Scene> <Scene>
<PointLight :position="{ y: 50, z: 50 }"></PointLight> <PointLight :position="{ y: 50, z: 50 }"></PointLight>
<Box ref="box" :size="10" material="material1"></Box> <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> </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 ## Test
git clone https://github.com/troisjs/trois git clone https://github.com/troisjs/trois