mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
update demos
This commit is contained in:
Kevin Levron
parent
503fdbfd78
commit
8a01b33031
@ -58,7 +58,7 @@ Thanks to VueJS/ViteJS, **TroisJS use watchers and HMR to update ThreeJS objects
|
||||
- [x] Cylinder
|
||||
- [x] Dodecahedron
|
||||
- [x] Icosahedron
|
||||
- [ ] Image (wip)
|
||||
- [x] Image
|
||||
- [x] InstancedMesh
|
||||
- [x] Lathe
|
||||
- [x] Octahedron
|
||||
@ -96,7 +96,7 @@ app.use(TroisJSVuePlugin);
|
||||
|
||||
## 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
|
||||
<template>
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<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 -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-178028522-1"></script>
|
||||
<script>
|
||||
|
||||
@ -11,17 +11,18 @@
|
||||
import Demo1 from './components/demos/Demo1.vue';
|
||||
import Demo2 from './components/demos/Demo2.vue';
|
||||
import Demo3 from './components/demos/Demo3.vue';
|
||||
import Demo4 from './components/demos/Demo4.vue';
|
||||
import Slider1 from './components/demos/Slider1.vue';
|
||||
import DemoGLTF from './components/demos/DemoGLTF.vue';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Demo1, Demo2, Demo3, Slider1, DemoGLTF,
|
||||
Demo1, Demo2, Demo3, Demo4, Slider1, DemoGLTF,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tests: ['Demo1', 'Demo2', 'Demo3', 'Slider1', 'DemoGLTF'],
|
||||
tests: ['Demo1', 'Demo2', 'Demo3', 'Demo4', 'Slider1', 'DemoGLTF'],
|
||||
test: 'Demo1',
|
||||
};
|
||||
},
|
||||
|
||||
@ -1,21 +1,62 @@
|
||||
<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" />
|
||||
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
|
||||
<Camera :position="{ x: -0, y: -120, z: 30 }" />
|
||||
<Scene background="#ffffff">
|
||||
|
||||
<PointLight ref="light1" color="#0E09DC" :intensity="0.85" :position="{ x: 0, y: 0, z: 30 }" />
|
||||
<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>
|
||||
</Renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NoisyPlane from '../noisy/NoisyPlane.js';
|
||||
import NoisyText from '../noisy/NoisyText.js';
|
||||
|
||||
export default {
|
||||
components: { NoisyPlane, NoisyText },
|
||||
mounted() {
|
||||
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(() => {
|
||||
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;
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,109 +1,24 @@
|
||||
<template>
|
||||
<Renderer ref="renderer" :auto-clear="false" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
|
||||
<Camera :position="{ z: 200 }" />
|
||||
<StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5" />
|
||||
<PhongMaterial id="material1" />
|
||||
<Scene>
|
||||
<AmbientLight color="#808080" />
|
||||
<PointLight color="#ff6000" />
|
||||
<PointLight ref="light" color="#0060ff" :intensity="0.5" />
|
||||
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
|
||||
<BoxGeometry :width="2" :height="2" :depth="10" />
|
||||
</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"
|
||||
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
|
||||
<Camera :position="{ x: 0, y: 0, z: 100 }" />
|
||||
<Scene background="#000000">
|
||||
<NoisyImage
|
||||
src="https://assets.codepen.io/33787/img2.jpg"
|
||||
:width="800"
|
||||
:time-coef="0.001"
|
||||
:noise-coef="2"
|
||||
:z-coef="5"
|
||||
:disp-coef="0.015"
|
||||
:rotation="{ x: -Math.PI / 6 }"
|
||||
/>
|
||||
</Scene>
|
||||
<EffectComposer>
|
||||
<RenderPass />
|
||||
<UnrealBloomPass :strength="1" />
|
||||
<HalftonePass :radius="1" :scatter="0" />
|
||||
</EffectComposer>
|
||||
</Renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Object3D, MathUtils, Vector3 } from 'three';
|
||||
|
||||
const {
|
||||
randFloat: rnd,
|
||||
randFloatSpread: rndFS,
|
||||
} = MathUtils;
|
||||
import NoisyImage from '../noisy/NoisyImage.js';
|
||||
|
||||
export default {
|
||||
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 {
|
||||
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;
|
||||
},
|
||||
},
|
||||
components: { NoisyImage },
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,43 +1,109 @@
|
||||
<template>
|
||||
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
|
||||
<Camera :position="{ z: 100 }" />
|
||||
<PhongMaterial id="material" color="#ffffff" />
|
||||
<Renderer ref="renderer" :auto-clear="false" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
|
||||
<Camera :position="{ z: 200 }" />
|
||||
<StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5" />
|
||||
<PhongMaterial id="material1" />
|
||||
<Scene>
|
||||
<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 }" />
|
||||
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
|
||||
<SphereGeometry :radius="5" />
|
||||
<AmbientLight color="#808080" />
|
||||
<PointLight color="#ff6000" />
|
||||
<PointLight ref="light" color="#0060ff" :intensity="0.5" />
|
||||
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
|
||||
<BoxGeometry :width="2" :height="2" :depth="10" />
|
||||
</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>
|
||||
<EffectComposer>
|
||||
<RenderPass />
|
||||
<UnrealBloomPass :strength="2" />
|
||||
<UnrealBloomPass :strength="1" />
|
||||
<HalftonePass :radius="1" :scatter="0" />
|
||||
</EffectComposer>
|
||||
</Renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Object3D, MathUtils } from 'three';
|
||||
import { Object3D, MathUtils, Vector3 } from 'three';
|
||||
|
||||
const {
|
||||
randFloat: rnd,
|
||||
randFloatSpread: rndFS,
|
||||
} = MathUtils;
|
||||
|
||||
export default {
|
||||
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 {
|
||||
NUM_INSTANCES: 2000,
|
||||
NUM_INSTANCES,
|
||||
instances,
|
||||
target,
|
||||
dummyO,
|
||||
dummyV,
|
||||
};
|
||||
},
|
||||
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;
|
||||
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>
|
||||
|
||||
@ -1,28 +1,43 @@
|
||||
<template>
|
||||
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }">
|
||||
<Camera :position="{ z: 250 }" />
|
||||
<BasicMaterial id="material" />
|
||||
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" :shadow="true">
|
||||
<Camera :position="{ z: 100 }" />
|
||||
<PhongMaterial id="material" color="#ffffff" />
|
||||
<Scene>
|
||||
<Text
|
||||
ref="text"
|
||||
text="TroisJS"
|
||||
font-src="helvetiker_regular.typeface.json"
|
||||
material-id="material"
|
||||
align="center"
|
||||
@ready="anim"
|
||||
></Text>
|
||||
<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 }" />
|
||||
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES" :cast-shadow="true" :receive-shadow="true">
|
||||
<SphereGeometry :radius="5" />
|
||||
</InstancedMesh>
|
||||
</Scene>
|
||||
<EffectComposer>
|
||||
<RenderPass />
|
||||
<UnrealBloomPass :strength="2" />
|
||||
</EffectComposer>
|
||||
</Renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Object3D, MathUtils } from 'three';
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
anim() {
|
||||
this.$refs.renderer.onBeforeRender(() => {
|
||||
this.$refs.text.mesh.rotation.x += 0.01;
|
||||
});
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
NUM_INSTANCES: 2000,
|
||||
};
|
||||
},
|
||||
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>
|
||||
|
||||
22
src/components/examples/Example1.vue
Normal file
22
src/components/examples/Example1.vue
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user