mirror of
https://github.com/troisjs/trois.git
synced 2024-11-24 04:12:02 +08:00
update examples
This commit is contained in:
Kevin Levron
parent
83168ee595
commit
b66fbdbd7d
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Renderer ref="renderer">
|
||||
<Camera :position="{ z: 100 }"></Camera>
|
||||
<LambertMaterial id="material" color="#0000ff"></LambertMaterial>
|
||||
<LambertMaterial id="material"></LambertMaterial>
|
||||
<Scene>
|
||||
<PointLight :position="{ x: 0, y: 50, z: 50 }"></PointLight>
|
||||
<Box ref="box" :size="10" :rotation="{ y: Math.PI / 4, z: Math.PI / 4 }" material="material"></Box>
|
||||
@ -12,17 +12,17 @@
|
||||
<script>
|
||||
import {
|
||||
Renderer, Camera, Scene,
|
||||
LambertMaterial,
|
||||
PointLight,
|
||||
Box,
|
||||
LambertMaterial,
|
||||
} from '../index.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Renderer, Camera, Scene,
|
||||
LambertMaterial,
|
||||
PointLight,
|
||||
Box,
|
||||
LambertMaterial,
|
||||
},
|
||||
mounted() {
|
||||
const renderer = this.$refs.renderer;
|
||||
|
||||
@ -1,86 +1,100 @@
|
||||
<template>
|
||||
<Renderer ref="renderer" :shadow="true" mouse-move="body" :mouse-raycast="true">
|
||||
<Renderer ref="renderer" :orbit-ctrl="{ enableDamping: true, dampingFactor: 0.05 }" mouse-move="body" :mouse-raycast="true">
|
||||
<Camera :position="{ z: 200 }"></Camera>
|
||||
|
||||
<!-- Not possible to use the same material for Mesh and InstancedMesh -->
|
||||
<PhongMaterial id="material1" color="#ffffff"></PhongMaterial>
|
||||
<PhongMaterial id="material2" color="#ffffff"></PhongMaterial>
|
||||
|
||||
<Scene id="scene1">
|
||||
<PointLight ref="light" :intensity="0.5" :position="{ z: 200 }" :cast-shadow="true" :shadow-map-size="{ width: 2048, height: 2048 }"></PointLight>
|
||||
<Plane ref="plane" material="material1" :receive-shadow="true"></Plane>
|
||||
<InstancedMesh ref="imesh" material="material2" :count="500" :cast-shadow="true" :receive-shadow="true">
|
||||
<BoxGeometry :size="5"></BoxGeometry>
|
||||
<StandardMaterial id="material" :transparent="true" :opacity="0.9" :metalness="0.8" :roughness="0.5"></StandardMaterial>
|
||||
<Scene id="scene1" background="#000000">
|
||||
<AmbientLight color="#808080"></AmbientLight>
|
||||
<PointLight ref="light" color="#ff6000"></PointLight>
|
||||
<PointLight ref="light" color="#0060ff" :intensity="0.5" :position="{ z: 200 }"></PointLight>
|
||||
<InstancedMesh ref="imesh" material="material" :count="NUM_INSTANCES">
|
||||
<BoxGeometry :width="2" :height="2" :depth="10"></BoxGeometry>
|
||||
</InstancedMesh>
|
||||
</Scene>
|
||||
</Renderer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { Object3D, MathUtils } from 'three';
|
||||
import { Object3D, MathUtils, Vector3 } from 'three';
|
||||
|
||||
import {
|
||||
Renderer, Camera, Scene,
|
||||
PointLight,
|
||||
PhongMaterial,
|
||||
Plane, InstancedMesh, BoxGeometry,
|
||||
Renderer, Camera, Scene, AmbientLight, PointLight,
|
||||
StandardMaterial, InstancedMesh, BoxGeometry,
|
||||
} from '../index.js';
|
||||
|
||||
import { lerp } from '../tools.js';
|
||||
const {
|
||||
randFloat: rnd,
|
||||
randFloatSpread: rndFS,
|
||||
} = MathUtils;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Renderer, Camera, Scene,
|
||||
PointLight,
|
||||
PhongMaterial,
|
||||
Plane, InstancedMesh, BoxGeometry,
|
||||
Renderer, Camera, Scene, AmbientLight, PointLight,
|
||||
StandardMaterial, InstancedMesh, BoxGeometry,
|
||||
},
|
||||
setup() {
|
||||
const NUM_INSTANCES = 2500;
|
||||
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),
|
||||
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,
|
||||
dummy,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.renderer = this.$refs.renderer;
|
||||
this.three = this.renderer.three;
|
||||
this.imesh = this.$refs.imesh.mesh;
|
||||
this.light = this.$refs.light.light;
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.updatePlaneSize();
|
||||
this.renderer.onAfterResize(this.updatePlaneSize);
|
||||
|
||||
// init instanced mesh matrix
|
||||
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
|
||||
const imesh = this.$refs.imesh.mesh;
|
||||
const dummy = new Object3D();
|
||||
for (let i = 0; i < 500; i++) {
|
||||
dummy.position.set(rndFS(200), rndFS(200), rnd(10, 50));
|
||||
dummy.rotation.set(rndFS(1), rndFS(1), rndFS(1));
|
||||
// const scale = rnd(0.2, 1);
|
||||
// dummy.scale.set(scale, scale, scale);
|
||||
dummy.updateMatrix();
|
||||
imesh.setMatrixAt(i, dummy.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);
|
||||
}
|
||||
imesh.instanceMatrix.needsUpdate = true;
|
||||
this.imesh.instanceMatrix.needsUpdate = true;
|
||||
|
||||
// light move
|
||||
const light = this.$refs.light.light;
|
||||
this.renderer.onBeforeRender(() => {
|
||||
const pos = this.three.mouseV3;
|
||||
// light.position.x = pos.x;
|
||||
// light.position.y = pos.y;
|
||||
light.position.x = lerp(light.position.x, pos.x, 0.05);
|
||||
light.position.y = lerp(light.position.y, pos.y, 0.05);
|
||||
});
|
||||
|
||||
// const light = this.$refs.light.light;
|
||||
// this.renderer.onBeforeRender(() => {
|
||||
// const t = Date.now() * 0.0001;
|
||||
// const c1 = Math.cos(t), c2 = c1 * Math.sin(t * 1.4);
|
||||
// light.position.set(c1 * 100, c2 * 100, 150);
|
||||
// });
|
||||
// animate
|
||||
this.renderer.onBeforeRender(this.animate);
|
||||
},
|
||||
updatePlaneSize() {
|
||||
const plane = this.$refs.plane.mesh;
|
||||
plane.scale.x = this.three.size.wWidth;
|
||||
plane.scale.y = this.three.size.wHeight;
|
||||
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, scaleZ, 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, scaleZ);
|
||||
this.dummy.lookAt(v.copy(position).add(velocity));
|
||||
this.dummy.updateMatrix();
|
||||
this.imesh.setMatrixAt(i, this.dummy.matrix);
|
||||
}
|
||||
this.imesh.instanceMatrix.needsUpdate = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
<Camera :position="{ z: 100 }"></Camera>
|
||||
<PhongMaterial id="material" color="#ffffff"></PhongMaterial>
|
||||
<Scene id="scene1" background="#ffffff">
|
||||
<!-- <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 20, z: 50 }"></SpotLight> -->
|
||||
<!-- <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -20, z: 50 }"></SpotLight> -->
|
||||
<!-- <SpotLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></SpotLight> -->
|
||||
<!-- <SpotLight color="#ff0000" :intensity="0.5" :position="{ y: -50, z: 50 }"></SpotLight> -->
|
||||
<PointLight color="#ffffff" :intensity="0.5" :position="{ y: 50, z: 50 }"></PointLight>
|
||||
<PointLight color="#ff0000" :intensity="0.5" :position="{ y: -50, z: 50 }"></PointLight>
|
||||
<InstancedMesh ref="imesh" material="material" :count="1000">
|
||||
@ -32,11 +32,10 @@ export default {
|
||||
InstancedMesh, SphereGeometry,
|
||||
},
|
||||
mounted() {
|
||||
// const renderer = this.$refs.renderer;
|
||||
|
||||
const { randFloat: rnd, randFloatSpread: rndFS } = MathUtils;
|
||||
// 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 < 1000; i++) {
|
||||
dummy.position.set(rndFS(100), rndFS(100), rndFS(100));
|
||||
const scale = rnd(0.2, 1);
|
||||
@ -45,9 +44,6 @@ export default {
|
||||
imesh.setMatrixAt(i, dummy.matrix);
|
||||
}
|
||||
imesh.instanceMatrix.needsUpdate = true;
|
||||
|
||||
// renderer.onBeforeRender(() => {
|
||||
// });
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user