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

demos and readme

Browse Source
This commit is contained in:
Kevin Levron 2020-09-21 13:45:11 +02:00
parent 16c21ef7f8
commit c401472952
5 changed files with 44 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -74,9 +74,13 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects
- [ ] ... - [ ] ...
- [ ] Post Processing - [ ] Post Processing
- [x] EffectComposer - [x] EffectComposer
- [x] BokehPass
- [x] FilmPass
- [x] HalftonePass
- [x] Renderpass - [x] Renderpass
- [x] UnrealBloomPass - [x] UnrealBloomPass
- [ ] ... - [ ] ...
- [ ] ...
## Installation ## Installation

9
src/components/demos/Demo1.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<Renderer ref="renderer"> <Renderer ref="renderer">
<Camera :position="{ z: 10 }"></Camera> <Camera :position="{ z: 10 }" />
<LambertMaterial id="material"></LambertMaterial> <LambertMaterial id="material" />
<Scene> <Scene>
<PointLight :position="{ y: 50, z: 50 }"></PointLight> <PointLight :position="{ y: 50, z: 50 }" />
<Box ref="box" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material-id="material"></Box> <Box ref="box" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material-id="material" />
</Scene> </Scene>
</Renderer> </Renderer>
</template> </template>
@ -14,7 +14,6 @@ export default {
mounted() { mounted() {
const renderer = this.$refs.renderer; const renderer = this.$refs.renderer;
const box = this.$refs.box.mesh; const box = this.$refs.box.mesh;
renderer.onBeforeRender(() => { renderer.onBeforeRender(() => {
box.rotation.x += 0.01; box.rotation.x += 0.01;
}); });

30
src/components/demos/Demo2.vue
View File

@ -1,18 +1,30 @@
<template> <template>
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true"> <Renderer ref="renderer" :auto-clear="false" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
<Camera :position="{ z: 200 }"></Camera> <Camera :position="{ z: 200 }" />
<StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5"></StandardMaterial> <StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5" />
<PhongMaterial id="material1" />
<Scene> <Scene>
<AmbientLight color="#808080"></AmbientLight> <AmbientLight color="#808080" />
<PointLight color="#ff6000"></PointLight> <PointLight color="#ff6000" />
<PointLight ref="light" color="#0060ff" :intensity="0.5"></PointLight> <PointLight ref="light" color="#0060ff" :intensity="0.5" />
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES"> <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
<BoxGeometry :width="2" :height="2" :depth="10"></BoxGeometry> <BoxGeometry :width="2" :height="2" :depth="10" />
</InstancedMesh> </InstancedMesh>
<Text
text="TroisJS"
font-src="helvetiker_regular.typeface.json"
material-id="material1"
align="center"
:size="30"
:height="5"
:position="{ x: 0, y: 0, z: 0 }"
:cast-shadow="true"
/>
</Scene> </Scene>
<EffectComposer> <EffectComposer>
<RenderPass></RenderPass> <RenderPass />
<UnrealBloomPass :strength="1"></UnrealBloomPass> <UnrealBloomPass :strength="1" />
<HalftonePass :radius="1" :scatter="0" />
</EffectComposer> </EffectComposer>
</Renderer> </Renderer>
</template> </template>

18
src/components/demos/Demo3.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true"> <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
<Camera :position="{ z: 100 }"></Camera> <Camera :position="{ z: 100 }" />
<PhongMaterial id="material" color="#ffffff"></PhongMaterial> <PhongMaterial id="material" color="#ffffff" />
<Scene> <Scene>
<SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }"></SpotLight> <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
<SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }"></SpotLight> <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true"> <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
<SphereGeometry :radius="5"></SphereGeometry> <SphereGeometry :radius="5" />
</InstancedMesh> </InstancedMesh>
</Scene> </Scene>
<EffectComposer> <EffectComposer>
<RenderPass></RenderPass> <RenderPass />
<UnrealBloomPass :strength="1"></UnrealBloomPass> <UnrealBloomPass :strength="2" />
</EffectComposer> </EffectComposer>
</Renderer> </Renderer>
</template> </template>
@ -22,7 +22,7 @@ import { Object3D, MathUtils } from 'three';
export default { export default {
setup() { setup() {
return { return {
NUM_INSTANCES: 500, NUM_INSTANCES: 2000,
}; };
}, },
mounted() { mounted() {
@ -31,7 +31,7 @@ export default {
const dummy = new Object3D(); const dummy = new Object3D();
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils; const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
for (let i = 0; i < this.NUM_INSTANCES; i++) { for (let i = 0; i < this.NUM_INSTANCES; i++) {
dummy.position.set(rndFS(100), rndFS(100), rndFS(100)); dummy.position.set(rndFS(200), rndFS(200), rndFS(200));
const scale = rnd(0.2, 1); const scale = rnd(0.2, 1);
dummy.scale.set(scale, scale, scale); dummy.scale.set(scale, scale, scale);
dummy.updateMatrix(); dummy.updateMatrix();

4
src/components/demos/Demo4.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"> <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
<Camera :position="{ z: 250 }"></Camera> <Camera :position="{ z: 250 }" />
<BasicMaterial id="material"></BasicMaterial> <BasicMaterial id="material" />
<Scene> <Scene>
<Text <Text
ref="text" ref="text"