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,],
],
}

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

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

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