新增表现形式
This commit is contained in:
rucky
parent
0fb534ecca
commit
cafa19f6fd
26
src/assets/layout/1024.js
Normal file
26
src/assets/layout/1024.js
Normal 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,],
|
||||||
|
],
|
||||||
|
}
|
||||||
@ -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,26 +232,60 @@ 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++) {
|
||||||
const color = new THREE.Color();
|
pos1024.origin.forEach((item, index) => {
|
||||||
color.setHSL(Math.random(), 0.7, Math.random() * 0.2 + 0.05);
|
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 });
|
sphere.position.x = i * 10 - (item.length / 2) * 10;
|
||||||
const sphere = new THREE.Mesh(geometry, material);
|
sphere.position.y =
|
||||||
sphere.position.x = Math.random() * 30 - 15;
|
-index * 10 + (pos1024.origin.length / 2) * 10;
|
||||||
sphere.position.y = Math.random() * 30 - 15;
|
sphere.position.z = ii * 5;
|
||||||
sphere.position.z = Math.random() * 30 - 15;
|
// sphere.position
|
||||||
sphere.position
|
// .normalize()
|
||||||
.normalize()
|
// .multiplyScalar(Math.random() * 4.0 + 2);
|
||||||
.multiplyScalar(Math.random() * 5.0 + 2.5);
|
sphere.scale.setScalar(Math.random() * 4 + 3);
|
||||||
sphere.scale.setScalar(Math.random() * Math.random() + 0.5);
|
this.scene.add(sphere);
|
||||||
this.scene.add(sphere);
|
|
||||||
|
|
||||||
// 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.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,
|
||||||
|
|||||||
@ -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"></span>
|
<span class="iconfont"></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"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user