mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
move demos
This commit is contained in:
parent
0e21aeaf28
commit
eb0568fa82
16
src/App.vue
16
src/App.vue
@ -8,21 +8,21 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Test1 from './components/Test1.vue';
|
||||
import Test2 from './components/Test2.vue';
|
||||
import Test3 from './components/Test3.vue';
|
||||
import Test4 from './components/Test4.vue';
|
||||
import TestGLTF from './components/TestGLTF.vue';
|
||||
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 DemoGLTF from './components/demos/DemoGLTF.vue';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
Test1, Test2, Test3, Test4, TestGLTF,
|
||||
Demo1, Demo2, Demo3, Demo4, DemoGLTF,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tests: ['Test1', 'Test2', 'Test3', 'Test4', 'TestGLTF'],
|
||||
test: 'Test1',
|
||||
tests: ['Demo1', 'Demo2', 'Demo3', 'Demo4', 'DemoGLTF'],
|
||||
test: 'Demo1',
|
||||
};
|
||||
},
|
||||
};
|
||||
|
@ -1,14 +0,0 @@
|
||||
<template>
|
||||
<GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
|
||||
<AmbientLight></AmbientLight>
|
||||
</GLTFViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { AmbientLight } from '../index.js';
|
||||
import GLTFViewer from './viewers/GLTFViewer.vue';
|
||||
|
||||
export default {
|
||||
components: { GLTFViewer, AmbientLight },
|
||||
};
|
||||
</script>
|
@ -20,4 +20,4 @@ export default {
|
||||
});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
114
src/components/demos/Demo5.vue
Normal file
114
src/components/demos/Demo5.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<Renderer
|
||||
ref="renderer"
|
||||
:orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }"
|
||||
mouse-move="body"
|
||||
:mouse-raycast="true"
|
||||
@click="updateColors"
|
||||
>
|
||||
<Camera :fov="50" :position="{ z: 200 }"></Camera>
|
||||
<SubSurfaceMaterial id="material" thicknessColor="#808080" :vertex-colors="true"></SubSurfaceMaterial>
|
||||
<Scene id="scene1" background="#000000">
|
||||
<!-- <AmbientLight color="#111111"></AmbientLight> -->
|
||||
<!-- <PointLight color="#ff0000" :intensity="0.25" :position="{ z: -200 }"></PointLight> -->
|
||||
<PointLight ref="light" color="#FFC0C0" :intensity="1"></PointLight>
|
||||
<InstancedMesh ref="imesh" material-id="material" :count="NUM_INSTANCES">
|
||||
<SphereGeometry :radius="5"></SphereGeometry>
|
||||
</InstancedMesh>
|
||||
</Scene>
|
||||
<EffectComposer>
|
||||
<RenderPass></RenderPass>
|
||||
<UnrealBloomPass :strength="0.75"></UnrealBloomPass>
|
||||
</EffectComposer>
|
||||
</Renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import chroma from 'chroma-js';
|
||||
import { Color, MathUtils, InstancedBufferAttribute, Object3D, Vector3 } from 'three';
|
||||
|
||||
const {
|
||||
randFloat: rnd,
|
||||
randFloatSpread: rndFS,
|
||||
} = MathUtils;
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const NUM_INSTANCES = 2000;
|
||||
const instances = [];
|
||||
const target = new Vector3();
|
||||
const dummy = new Object3D();
|
||||
|
||||
for (let i = 0; i < NUM_INSTANCES; i++) {
|
||||
instances.push({
|
||||
position: new Vector3(rndFS(200), rndFS(200), rndFS(200)),
|
||||
scale: rnd(0.2, 1),
|
||||
velocity: new Vector3(rndFS(2), rndFS(2), rndFS(2)),
|
||||
attraction: 0.02 + rnd(-0.01, 0.01),
|
||||
vlimit: 1 + rnd(-0.1, 0.1),
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
NUM_INSTANCES,
|
||||
instances,
|
||||
target,
|
||||
dummy,
|
||||
};
|
||||
},
|
||||
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 } = this.instances[i];
|
||||
this.dummy.position.copy(position);
|
||||
this.dummy.scale.set(scale, scale, scale);
|
||||
this.dummy.updateMatrix();
|
||||
this.imesh.setMatrixAt(i, this.dummy.matrix);
|
||||
}
|
||||
this.imesh.instanceMatrix.needsUpdate = true;
|
||||
|
||||
// init instances colors
|
||||
this.updateColors();
|
||||
|
||||
// animate
|
||||
this.renderer.onBeforeRender(this.animate);
|
||||
},
|
||||
updateColors() {
|
||||
const cscale = chroma.scale([chroma.random(), chroma.random()]);
|
||||
const colors = [];
|
||||
for (let i = 0; i < this.NUM_INSTANCES; i++) {
|
||||
// const color = new Color(rnd(0, 0xffffff));
|
||||
const color = new Color(cscale(rnd(0, 1)).hex());
|
||||
colors.push(color.r, color.g, color.b);
|
||||
}
|
||||
this.imesh.geometry.setAttribute('color', new InstancedBufferAttribute(new Float32Array(colors), 3));
|
||||
},
|
||||
animate() {
|
||||
this.target.copy(this.renderer.three.mouseV3);
|
||||
this.light.position.copy(this.target);
|
||||
|
||||
const v = new Vector3();
|
||||
for (let i = 0; i < this.NUM_INSTANCES; i++) {
|
||||
const { position, scale, velocity, attraction, vlimit } = this.instances[i];
|
||||
|
||||
v.copy(this.target).sub(position).normalize().multiplyScalar(attraction);
|
||||
velocity.add(v).clampScalar(-vlimit, vlimit);
|
||||
position.add(velocity);
|
||||
|
||||
this.dummy.position.copy(position);
|
||||
this.dummy.scale.set(scale, scale, scale);
|
||||
this.dummy.updateMatrix();
|
||||
this.imesh.setMatrixAt(i, this.dummy.matrix);
|
||||
}
|
||||
this.imesh.instanceMatrix.needsUpdate = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
9
src/components/demos/DemoGLTF.vue
Normal file
9
src/components/demos/DemoGLTF.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<GLTFViewer src="test.glb" :camera-position="{ z: 1 }">
|
||||
<AmbientLight></AmbientLight>
|
||||
</GLTFViewer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
1
src/components/index.js
Normal file
1
src/components/index.js
Normal file
@ -0,0 +1 @@
|
||||
export { default as GLTFViewer } from './viewers/GLTFViewer.vue';
|
@ -9,11 +9,8 @@
|
||||
|
||||
<script>
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||||
import { Renderer, Camera, Scene } from '../../index.js';
|
||||
import { setFromProp } from '../../tools.js';
|
||||
|
||||
export default {
|
||||
components: { Renderer, Camera, Scene },
|
||||
props: {
|
||||
src: String,
|
||||
cameraPosition: Object,
|
||||
@ -21,8 +18,6 @@ export default {
|
||||
mounted() {
|
||||
this.renderer = this.$refs.renderer;
|
||||
|
||||
setFromProp(this.$refs.camera.position, this.cameraPosition);
|
||||
|
||||
const loader = new GLTFLoader();
|
||||
loader.load(this.src, (gltf) => {
|
||||
this.renderer.three.scene.add(gltf.scene);
|
||||
|
@ -5,4 +5,6 @@ export * from './materials/index.js';
|
||||
export * from './meshes/index.js';
|
||||
export * from './effects/index.js';
|
||||
|
||||
export * from './components/index.js';
|
||||
|
||||
export * from './tools.js';
|
||||
|
@ -37,6 +37,8 @@ export const TroisJSVuePlugin = {
|
||||
'EffectComposer',
|
||||
'RenderPass',
|
||||
'UnrealBloomPass',
|
||||
|
||||
'GLTFViewer',
|
||||
];
|
||||
|
||||
comps.forEach(comp => {
|
||||
|
Loading…
Reference in New Issue
Block a user