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 demos

Browse Source
This commit is contained in:
Kevin Levron 2020-09-30 18:10:17 +02:00
parent 503fdbfd78
commit 8a01b33031
8 changed files with 210 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -58,7 +58,7 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects
- [x] Cylinder - [x] Cylinder
- [x] Dodecahedron - [x] Dodecahedron
- [x] Icosahedron - [x] Icosahedron
- [ ] Image (wip) - [x] Image
- [x] InstancedMesh - [x] InstancedMesh
- [x] Lathe - [x] Lathe
- [x] Octahedron - [x] Octahedron
@ -96,7 +96,7 @@ app.use(TroisJSVuePlugin);
## PoC ## PoC
I first made a simple *Proof of Concept*, take a look at [Demo1.vue](/src/components/demos/Demo1.vue) : I first made a simple *Proof of Concept*, take a look at [Example1.vue](/src/components/examples/Example1.vue) :
```html ```html
<template> <template>

2
docs/index.html
View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="index.fc56ae0f.js"></script> <script type="module" src="index.295ca1aa.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics --> <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-178028522-1"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-178028522-1"></script>
<script> <script>

5
src/App.vue
View File

@ -11,17 +11,18 @@
import Demo1 from './components/demos/Demo1.vue'; import Demo1 from './components/demos/Demo1.vue';
import Demo2 from './components/demos/Demo2.vue'; import Demo2 from './components/demos/Demo2.vue';
import Demo3 from './components/demos/Demo3.vue'; import Demo3 from './components/demos/Demo3.vue';
import Demo4 from './components/demos/Demo4.vue';
import Slider1 from './components/demos/Slider1.vue'; import Slider1 from './components/demos/Slider1.vue';
import DemoGLTF from './components/demos/DemoGLTF.vue'; import DemoGLTF from './components/demos/DemoGLTF.vue';
export default { export default {
name: 'App', name: 'App',
components: { components: {
Demo1, Demo2, Demo3, Slider1, DemoGLTF, Demo1, Demo2, Demo3, Demo4, Slider1, DemoGLTF,
}, },
data() { data() {
return { return {
tests: ['Demo1', 'Demo2', 'Demo3', 'Slider1', 'DemoGLTF'], tests: ['Demo1', 'Demo2', 'Demo3', 'Demo4', 'Slider1', 'DemoGLTF'],
test: 'Demo1', test: 'Demo1',
}; };
}, },

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

@ -1,21 +1,62 @@
<template> <template>
<Renderer ref="renderer"> <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
<Camera :position="{ z: 10 }" /> <Camera :position="{ x: -0, y: -120, z: 30 }" />
<LambertMaterial id="material" /> <Scene background="#ffffff">
<Scene>
<PointLight :position="{ y: 50, z: 50 }" /> <PointLight ref="light1" color="#0E09DC" :intensity="0.85" :position="{ x: 0, y: 0, z: 30 }" />
<Box ref="box" :size="1" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material-id="material" /> <PointLight ref="light2" color="#1CD1E1" :intensity="0.85" :position="{ x: 0, y: 0, z: 30 }" />
<PointLight ref="light3" color="#18C02C" :intensity="0.85" :position="{ x: 0, y: 0, z: 30 }" />
<PointLight ref="light4" color="#ee3bcf" :intensity="0.85" :position="{ x: 0, y: 0, z: 30 }" />
<NoisyText
text="TroisJS"
font-src="helvetiker_regular.typeface.json"
align="center"
:size="10"
:height="2"
:noise-coef="0.03"
:z-coef="5"
:position="{ x: 0, y: 0, z: 30 }"
:rotation="{ x: Math.PI / 2, y: 0, z: 0 }"
/>
<NoisyPlane
:width="200" :width-segments="100"
:height="200" :height-segments="100"
:time-coef="0.0003"
:noise-coef="0.03"
:z-coef="7"
:position="{ x: 0, y: 0, z: 0 }"
/>
</Scene> </Scene>
</Renderer> </Renderer>
</template> </template>
<script> <script>
import NoisyPlane from '../noisy/NoisyPlane.js';
import NoisyText from '../noisy/NoisyText.js';
export default { export default {
components: { NoisyPlane, NoisyText },
mounted() { mounted() {
const renderer = this.$refs.renderer; const renderer = this.$refs.renderer;
const box = this.$refs.box.mesh; const light1 = this.$refs.light1.light;
const light2 = this.$refs.light2.light;
const light3 = this.$refs.light3.light;
const light4 = this.$refs.light4.light;
renderer.onBeforeRender(() => { renderer.onBeforeRender(() => {
box.rotation.x += 0.01; const time = Date.now() * 0.001;
const d = 100;
light1.position.x = Math.sin(time * 0.1) * d;
light1.position.y = Math.cos(time * 0.2) * d;
light2.position.x = Math.cos(time * 0.3) * d;
light2.position.y = Math.sin(time * 0.4) * d;
light3.position.x = Math.sin(time * 0.5) * d;
light3.position.y = Math.sin(time * 0.6) * d;
light4.position.x = Math.sin(time * 0.7) * d;
light4.position.y = Math.cos(time * 0.8) * d;
}); });
}, },
}; };

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

@ -1,109 +1,24 @@
<template> <template>
<Renderer ref="renderer" :auto-clear="false" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true"> <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
<Camera :position="{ z: 200 }" /> <Camera :position="{ x: 0, y: 0, z: 100 }" />
<StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5" /> <Scene background="#000000">
<PhongMaterial id="material1" /> <NoisyImage
<Scene> src="https://assets.codepen.io/33787/img2.jpg"
<AmbientLight color="#808080" /> :width="800"
<PointLight color="#ff6000" /> :time-coef="0.001"
<PointLight ref="light" color="#0060ff" :intensity="0.5" /> :noise-coef="2"
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES"> :z-coef="5"
<BoxGeometry :width="2" :height="2" :depth="10" /> :disp-coef="0.015"
</InstancedMesh> :rotation="{ x: -Math.PI / 6 }"
<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>
<RenderPass />
<UnrealBloomPass :strength="1" />
<HalftonePass :radius="1" :scatter="0" />
</EffectComposer>
</Renderer> </Renderer>
</template> </template>
<script> <script>
import { Object3D, MathUtils, Vector3 } from 'three'; import NoisyImage from '../noisy/NoisyImage.js';
const {
randFloat: rnd,
randFloatSpread: rndFS,
} = MathUtils;
export default { export default {
setup() { components: { NoisyImage },
const NUM_INSTANCES = 2000;
const instances = [];
const target = new Vector3();
const dummyO = new Object3D();
const dummyV = new Vector3();
for (let i = 0; i < NUM_INSTANCES; i++) {
instances.push({
position: new Vector3(rndFS(200), rndFS(200), rndFS(200)),
scale: rnd(0.2, 1),
scaleZ: rnd(0.1, 1),
velocity: new Vector3(rndFS(2), rndFS(2), rndFS(2)),
attraction: 0.03 + rnd(-0.01, 0.01),
vlimit: 1.2 + rnd(-0.1, 0.1),
});
}
return {
NUM_INSTANCES,
instances,
target,
dummyO,
dummyV,
};
},
mounted() {
this.renderer = this.$refs.renderer;
this.imesh = this.$refs.imesh.mesh;
this.light = this.$refs.light.light;
this.init();
},
methods: {
init() {
// init instanced mesh matrix
for (let i = 0; i < this.NUM_INSTANCES; i++) {
const { position, scale, scaleZ } = this.instances[i];
this.dummyO.position.copy(position);
this.dummyO.scale.set(scale, scale, scaleZ);
this.dummyO.updateMatrix();
this.imesh.setMatrixAt(i, this.dummyO.matrix);
}
this.imesh.instanceMatrix.needsUpdate = true;
// animate
this.renderer.onBeforeRender(this.animate);
},
animate() {
this.target.copy(this.renderer.three.mouseV3);
this.light.position.copy(this.target);
for (let i = 0; i < this.NUM_INSTANCES; i++) {
const { position, scale, scaleZ, velocity, attraction, vlimit } = this.instances[i];
this.dummyV.copy(this.target).sub(position).normalize().multiplyScalar(attraction);
velocity.add(this.dummyV).clampScalar(-vlimit, vlimit);
position.add(velocity);
this.dummyO.position.copy(position);
this.dummyO.scale.set(scale, scale, scaleZ);
this.dummyO.lookAt(this.dummyV.copy(position).add(velocity));
this.dummyO.updateMatrix();
this.imesh.setMatrixAt(i, this.dummyO.matrix);
}
this.imesh.instanceMatrix.needsUpdate = true;
},
},
}; };
</script> </script>

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

@ -1,43 +1,109 @@
<template> <template>
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true"> <Renderer ref="renderer" :auto-clear="false" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
<Camera :position="{ z: 100 }" /> <Camera :position="{ z: 200 }" />
<PhongMaterial id="material" color="#ffffff" /> <StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5" />
<PhongMaterial id="material1" />
<Scene> <Scene>
<SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" /> <AmbientLight color="#808080" />
<SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" /> <PointLight color="#ff6000" />
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true"> <PointLight ref="light" color="#0060ff" :intensity="0.5" />
<SphereGeometry :radius="5" /> <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
<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 />
<UnrealBloomPass :strength="2" /> <UnrealBloomPass :strength="1" />
<HalftonePass :radius="1" :scatter="0" />
</EffectComposer> </EffectComposer>
</Renderer> </Renderer>
</template> </template>
<script> <script>
import { Object3D, MathUtils } from 'three'; import { Object3D, MathUtils, Vector3 } from 'three';
const {
randFloat: rnd,
randFloatSpread: rndFS,
} = MathUtils;
export default { export default {
setup() { setup() {
const NUM_INSTANCES = 2000;
const instances = [];
const target = new Vector3();
const dummyO = new Object3D();
const dummyV = new Vector3();
for (let i = 0; i < NUM_INSTANCES; i++) {
instances.push({
position: new Vector3(rndFS(200), rndFS(200), rndFS(200)),
scale: rnd(0.2, 1),
scaleZ: rnd(0.1, 1),
velocity: new Vector3(rndFS(2), rndFS(2), rndFS(2)),
attraction: 0.03 + rnd(-0.01, 0.01),
vlimit: 1.2 + rnd(-0.1, 0.1),
});
}
return { return {
NUM_INSTANCES: 2000, NUM_INSTANCES,
instances,
target,
dummyO,
dummyV,
}; };
}, },
mounted() { mounted() {
// init instanced mesh matrix this.renderer = this.$refs.renderer;
const imesh = this.$refs.imesh.mesh; this.imesh = this.$refs.imesh.mesh;
const dummy = new Object3D(); this.light = this.$refs.light.light;
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils; this.init();
for (let i = 0; i < this.NUM_INSTANCES; i++) { },
dummy.position.set(rndFS(200), rndFS(200), rndFS(200)); methods: {
const scale = rnd(0.2, 1); init() {
dummy.scale.set(scale, scale, scale); // init instanced mesh matrix
dummy.updateMatrix(); for (let i = 0; i < this.NUM_INSTANCES; i++) {
imesh.setMatrixAt(i, dummy.matrix); const { position, scale, scaleZ } = this.instances[i];
} this.dummyO.position.copy(position);
imesh.instanceMatrix.needsUpdate = true; this.dummyO.scale.set(scale, scale, scaleZ);
this.dummyO.updateMatrix();
this.imesh.setMatrixAt(i, this.dummyO.matrix);
}
this.imesh.instanceMatrix.needsUpdate = true;
// animate
this.renderer.onBeforeRender(this.animate);
},
animate() {
this.target.copy(this.renderer.three.mouseV3);
this.light.position.copy(this.target);
for (let i = 0; i < this.NUM_INSTANCES; i++) {
const { position, scale, scaleZ, velocity, attraction, vlimit } = this.instances[i];
this.dummyV.copy(this.target).sub(position).normalize().multiplyScalar(attraction);
velocity.add(this.dummyV).clampScalar(-vlimit, vlimit);
position.add(velocity);
this.dummyO.position.copy(position);
this.dummyO.scale.set(scale, scale, scaleZ);
this.dummyO.lookAt(this.dummyV.copy(position).add(velocity));
this.dummyO.updateMatrix();
this.imesh.setMatrixAt(i, this.dummyO.matrix);
}
this.imesh.instanceMatrix.needsUpdate = true;
},
}, },
}; };
</script> </script>

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

@ -1,28 +1,43 @@
<template> <template>
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"> <Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
<Camera :position="{ z: 250 }" /> <Camera :position="{ z: 100 }" />
<BasicMaterial id="material" /> <PhongMaterial id="material" color="#ffffff" />
<Scene> <Scene>
<Text <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
ref="text" <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -150, z: 0 }" :cast-shadow="true" :shadow-map-size="{ width: 1024, height: 1024 }" />
text="TroisJS" <InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
font-src="helvetiker_regular.typeface.json" <SphereGeometry :radius="5" />
material-id="material" </InstancedMesh>
align="center"
@ready="anim"
></Text>
</Scene> </Scene>
<EffectComposer>
<RenderPass />
<UnrealBloomPass :strength="2" />
</EffectComposer>
</Renderer> </Renderer>
</template> </template>
<script> <script>
import { Object3D, MathUtils } from 'three';
export default { export default {
methods: { setup() {
anim() { return {
this.$refs.renderer.onBeforeRender(() => { NUM_INSTANCES: 2000,
this.$refs.text.mesh.rotation.x += 0.01; };
}); },
}, mounted() {
// init instanced mesh matrix
const imesh = this.$refs.imesh.mesh;
const dummy = new Object3D();
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
for (let i = 0; i < this.NUM_INSTANCES; i++) {
dummy.position.set(rndFS(200), rndFS(200), rndFS(200));
const scale = rnd(0.2, 1);
dummy.scale.set(scale, scale, scale);
dummy.updateMatrix();
imesh.setMatrixAt(i, dummy.matrix);
}
imesh.instanceMatrix.needsUpdate = true;
}, },
}; };
</script> </script>

22
src/components/examples/Example1.vue Normal file
View File

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