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

49
README.md
View File

@ -17,54 +17,37 @@ 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> <Camera :position="{ z: 100 }"></Camera>
<PhongMaterial id="material1" color="#ff0000"></PhongMaterial> <LambertMaterial id="material"></LambertMaterial>
<LambertMaterial id="material2" color="#0000ff"></LambertMaterial>
<Scene> <Scene>
<PointLight :position="{ y: 50, z: 50 }"></PointLight> <PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
<Box ref="box" :size="10" material="material1"></Box> <Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material="material"></Box>
<Sphere ref="sphere" :radius="10" :position="{ x: 50 }" material="material2"></Sphere>
</Scene> </Scene>
</Renderer> </Renderer>
``` ```
## InstancedMesh ## InstancedMesh
Take a look at [Test3.vue](/src/components/Test3.vue). Take a look at [Test2.vue](/src/components/Test2.vue).
### Template ### Template
```html ```html
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"> <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
<Camera :position="{ z: 100 }"></Camera> <Camera :position="{ z: 200 }"></Camera>
<PhongMaterial id="material" color="#ffffff"></PhongMaterial> <StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5"></StandardMaterial>
<Scene id="scene1"> <Scene id="scene1" background="#000000">
<PointLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></PointLight> <AmbientLight color="#808080"></AmbientLight>
<PointLight color="#ff0000" :intensity="0.5" :position="{ y: -50, z: 50 }"></PointLight> <PointLight ref="light" color="#ff6000"></PointLight>
<InstancedMesh ref="imesh" material="material" :count="1000"> <PointLight ref="light" color="#0060ff" :intensity="0.5" :position="{ z: 200 }"></PointLight>
<SphereGeometry :radius="2"></SphereGeometry> <InstancedMesh ref="imesh" material="material" :count="NUM_INSTANCES">
<BoxGeometry :width="2" :height="2" :depth="10"></BoxGeometry>
</InstancedMesh> </InstancedMesh>
</Scene> </Scene>
</Renderer> </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;
```
## GLTF ## GLTF
Take a look at [TestGLTF.vue](/src/components/TestGLTF.vue). Take a look at [TestGLTF.vue](/src/components/TestGLTF.vue).
@ -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