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-16 21:20:34 +02:00
parent 46eccd7025
commit 047dd1543f
1 changed files with 24 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
README.md
View File

@ -17,52 +17,35 @@ I started from scratch... I don't know if I will have time to maintain this, but
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) :
```html ```html
<Renderer> <Renderer ref="renderer">
<PerspectiveCamera :position="{ z: 100 }"></PerspectiveCamera>
<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>
<Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="material2"></Sphere>
</Scene>
</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> <Camera :position="{ z: 100 }"></Camera>
<PhongMaterial id="material" color="#ffffff"></PhongMaterial> <LambertMaterial id="material"></LambertMaterial>
<Scene id="scene1"> <Scene>
<PointLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></PointLight> <PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
<PointLight color="#ff0000" :intensity="0.5" :position="{ y: -50, z: 50 }"></PointLight> <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material="material"></Box>
<InstancedMesh ref="imesh" material="material" :count="1000">
<SphereGeometry :radius="2"></SphereGeometry>
</InstancedMesh>
</Scene> </Scene>
</Renderer> </Renderer>
``` ```
### Script : init instanceMatrix ## InstancedMesh
```js Take a look at [Test2.vue](/src/components/Test2.vue).
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
const imesh = this.$refs.imesh.mesh; ### Template
const dummy = new Object3D();
for (let i = 0; i < 1000; i++) { ```html
dummy.position.set(rndFS(100), rndFS(100), rndFS(100)); <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
const scale = rnd(0.2, 1); <Camera :position="{ z: 200 }"></Camera>
dummy.scale.set(scale, scale, scale); <StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5"></StandardMaterial>
dummy.updateMatrix(); <Scene id="scene1" background="#000000">
imesh.setMatrixAt(i, dummy.matrix); <AmbientLight color="#808080"></AmbientLight>
} <PointLight ref="light" color="#ff6000"></PointLight>
imesh.instanceMatrix.needsUpdate = true; <PointLight ref="light" color="#0060ff" :intensity="0.5" :position="{ z: 200 }"></PointLight>
<InstancedMesh ref="imesh" material="material" :count="NUM_INSTANCES">
<BoxGeometry :width="2" :height="2" :depth="10"></BoxGeometry>
</InstancedMesh>
</Scene>
</Renderer>
``` ```
## GLTF ## GLTF
@ -75,7 +58,7 @@ Take a look at [TestGLTF.vue](/src/components/TestGLTF.vue).
</GLTFViewer> </GLTFViewer>
``` ```
## Test ## Dev
git clone https://github.com/troisjs/trois git clone https://github.com/troisjs/trois
cd trois cd trois