shaochangli/webglToy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改color 入场动画等

Browse Source
This commit is contained in:
rucky 2021-10-13 18:44:25 +08:00
parent 7908cb3baa
commit 59d1d4c62c
1 changed files with 33 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/color/index.vue
View File

@ -193,11 +193,15 @@ export default {
this.raycaster.setFromCamera(this.mouse, this.camera); this.raycaster.setFromCamera(this.mouse, this.camera);
this.intersects = this.raycaster.intersectObjects( this.intersects = this.raycaster.intersectObjects(
this.scene.children, this.group.children,
false false
); );
if (this.intersects.length > 0) { if (this.intersects.length > 0) {
const object = this.intersects[0].object; const object = this.intersects[0].object;
// gsap.to(object.material, {
// opacity: 0,
// onUpdate: () => {},
// });
object.layers.toggle(this.BLOOM_SCENE); object.layers.toggle(this.BLOOM_SCENE);
this.render(); this.render();
} }
@ -221,16 +225,16 @@ export default {
this.scene.children.length = 0; this.scene.children.length = 0;
const geometry = new THREE.IcosahedronGeometry(1, 15); const geometry = new THREE.IcosahedronGeometry(1, 15);
this.group = new THREE.Group();
for (let i = 0; i < 50; i++) { for (let i = 0; i < 50; i++) {
const color = new THREE.Color(); const color = new THREE.Color();
color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05); color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
const material = new THREE.MeshBasicMaterial({ color: color }); const material = new THREE.MeshBasicMaterial({ color: color });
const sphere = new THREE.Mesh(geometry, material); const sphere = new THREE.Mesh(geometry, material);
sphere.position.x = Math.random() * 10 - 5; sphere.position.x = Math.random() * 100 - 50;
sphere.position.y = Math.random() * 10 - 5; sphere.position.y = Math.random() * 100 - 50;
sphere.position.z = Math.random() * 10 - 5; sphere.position.z = Math.random() * 100 - 50;
sphere.position sphere.position
.normalize() .normalize()
.multiplyScalar(Math.random() * 4.0 + 2.0); .multiplyScalar(Math.random() * 4.0 + 2.0);
@ -239,8 +243,10 @@ export default {
if (Math.random() < 0.25) if (Math.random() < 0.25)
sphere.layers.enable(this.BLOOM_SCENE); sphere.layers.enable(this.BLOOM_SCENE);
}
this.group.add(sphere);
}
this.scene.add(this.group);
this.render(); this.render();
}, },
disposeMaterial(obj) { disposeMaterial(obj) {
@ -295,13 +301,34 @@ export default {
} }
}, },
addAnimation() { addAnimation() {
// 自旋转
gsap.to(this.group.rotation, {
y: -Math.PI * 2,
duration: 2,
// yoyo: true,
// repeat: -1,
onUpdate: () => {
// this.renderer.toneMappingExposure = Math.pow(
// this.params.exposure,
// 4.0
// );
this.render();
// console.log(this.params.scene);
},
});
// 光闪烁
gsap.to(this.params, { gsap.to(this.params, {
exposure: 1.2, exposure: 1.2,
duration: 2, duration: 2,
yoyo: true, yoyo: true,
repeat: -1, repeat: -1,
onUpdate: () => { onUpdate: () => {
this.renderer.toneMappingExposure = Math.pow(
this.params.exposure,
4.0
);
this.render(); this.render();
// console.log(this.params.scene);
}, },
}); });
}, },