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

新增表现形式

Browse Source
This commit is contained in:
rucky 2021-10-15 19:24:23 +08:00
parent 0fb534ecca
commit cafa19f6fd
3 changed files with 121 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/assets/layout/1024.js Normal file
View File

@ -0,0 +1,26 @@
export default {
origin: [
[1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0],
],
game: [
[1, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
[0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1,],
[0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1,],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
[0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
[0, 0, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1,],
[0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1,],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
[1, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0,],
],
}

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

@ -9,6 +9,7 @@ import * as Stats from "stats.js";
import colorVertex from "@/assets/shader/color_vertex.glsl";
import colorFrag from "@/assets/shader/color_fragment.glsl";
import pos1024 from "@/assets/layout/1024.js";
import { GUI } from "three/examples/jsm/libs/dat.gui.module.js";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
@ -23,6 +24,7 @@ export default {
},
data() {
return {
remaining: 50,
container: null,
camera: null,
scene: null,
@ -73,9 +75,9 @@ export default {
40,
window.innerWidth / window.innerHeight,
1,
200
2000
);
this.camera.position.set(0, 0, 30);
this.camera.position.set(0, 0, 500);
this.camera.lookAt(0, 0, 0);
// 定义操控
@ -85,7 +87,7 @@ export default {
);
this.controls.maxPolarAngle = Math.PI * 0.5;
this.controls.minDistance = 1;
this.controls.maxDistance = 200;
this.controls.maxDistance = 500;
this.controls.addEventListener("change", this.render);
// 添加全局环境光
@ -230,26 +232,60 @@ export default {
const geometry = new THREE.IcosahedronGeometry(1, 15);
this.group = new THREE.Group();
for (let i = 0; i < 50; i++) {
const color = new THREE.Color();
color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
for (let ii = 0; ii < 2; ii++) {
pos1024.origin.forEach((item, index) => {
item.forEach((t, i) => {
if (t == 0) {
const color = new THREE.Color();
color.setHSL(
Math.random(),
0.7,
Math.random() * 0.2 + 0.05
);
const material = new THREE.MeshBasicMaterial({
color: color,
});
const sphere = new THREE.Mesh(geometry, material);
const material = new THREE.MeshBasicMaterial({ color: color });
const sphere = new THREE.Mesh(geometry, material);
sphere.position.x = Math.random() * 30 - 15;
sphere.position.y = Math.random() * 30 - 15;
sphere.position.z = Math.random() * 30 - 15;
sphere.position
.normalize()
.multiplyScalar(Math.random() * 5.0 + 2.5);
sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
this.scene.add(sphere);
sphere.position.x = i * 10 - (item.length / 2) * 10;
sphere.position.y =
-index * 10 + (pos1024.origin.length / 2) * 10;
sphere.position.z = ii * 5;
// sphere.position
// .normalize()
// .multiplyScalar(Math.random() * 4.0 + 2);
sphere.scale.setScalar(Math.random() * 4 + 3);
this.scene.add(sphere);
// if (Math.random() < 0.25)
sphere.layers.enable(this.BLOOM_SCENE);
// if (Math.random() < 0.25)
sphere.layers.enable(this.BLOOM_SCENE);
this.group.add(sphere);
this.group.add(sphere);
}
});
});
}
// for (let i = 0; i < this.remaining; i++) {
// const color = new THREE.Color();
// color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
// const material = new THREE.MeshBasicMaterial({ color: color });
// const sphere = new THREE.Mesh(geometry, material);
// sphere.position.x = Math.random() * 30 - 15;
// sphere.position.y = Math.random() * 30 - 15;
// sphere.position.z = Math.random() * 30 - 15;
// sphere.position
// .normalize()
// .multiplyScalar(Math.random() * 5.0 + 2.5);
// sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
// this.scene.add(sphere);
// // if (Math.random() < 0.25)
// sphere.layers.enable(this.BLOOM_SCENE);
// this.group.add(sphere);
// }
this.scene.add(this.group);
this.render();
},
@ -327,13 +363,13 @@ export default {
item.position,
{
x: () => {
return Math.random() * 40 - 20;
return Math.random() * 100 - 50;
},
y: () => {
return Math.random() * 20 - 10;
return Math.random() * 100 - 50;
},
z: () => {
return Math.random() * 40 - 20;
return Math.random() * 100 - 20;
},
},
{
@ -347,6 +383,41 @@ export default {
}
);
});
let iii = 0;
setTimeout(() => {
pos1024.game.forEach((item, index) => {
item.forEach((t, i) => {
if (t == 0) {
let position = {};
position.x = i * 10 - (item.length / 2) * 10;
position.y =
-index * 10 + (pos1024.game.length / 2) * 10;
position.z = 0;
gsap.to(this.group.children[iii].position, {
x: position.x,
y: position.y,
z: position.z,
duration: 1,
onUpdate: () => {
if (i == 0) this.render();
},
});
iii++;
}
});
});
this.group.children.forEach((item, index) => {
if (index > iii) {
gsap.to(item.scale, { x: 0, y: 0, z: 0 });
}
});
}, 6000);
// for (let ii = 0; ii < 2; ii++) {
// }
// 光闪烁
// gsap.to(this.params, {
// exposure: 1.1,

9
src/page/index/Home/index.vue
View File

@ -19,17 +19,12 @@
<p class="page__desc">have fun！</p>
</div>
<div class="weui-grids" style="margin-top: 100px">
<a
href="#"
style="opacity: 0.5"
@click="jump(1)"
class="weui-grid"
>
<div style="opacity: 0.5" @click="jump(1)" class="weui-grid">
<div class="weui-grid__icon">
<span class="iconfont">&#xe614;</span>
</div>
<p class="weui-grid__label">鉴色</p>
</a>
</div>
<a
href="#"
style="opacity: 0.5"