diff --git a/src/assets/layout/1024.js b/src/assets/layout/1024.js
new file mode 100644
index 0000000..2e945d0
--- /dev/null
+++ b/src/assets/layout/1024.js
@@ -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,],
+ ],
+}
\ No newline at end of file
diff --git a/src/components/color/index.vue b/src/components/color/index.vue
index 3ef4c56..5d61cd9 100644
--- a/src/components/color/index.vue
+++ b/src/components/color/index.vue
@@ -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,
diff --git a/src/page/index/Home/index.vue b/src/page/index/Home/index.vue
index cc56504..1cb1e5c 100644
--- a/src/page/index/Home/index.vue
+++ b/src/page/index/Home/index.vue
@@ -19,17 +19,12 @@
have fun！