forked from jeetkanodia/matrix
-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
147 lines (127 loc) · 4.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./src/assets/logon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MATRIX</title>
<style>
body {
margin: 0;
}
canvas {
position: fixed;
top: 0;
left: 0;
}
#root {
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module">
import * as THREE from 'three';
// Create scene
const scene = new THREE.Scene();
// Create camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
// Create renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create invisible grid
const gridSize = window.innerWidth / 10;
const gridSpacing = 1;
const material = new THREE.LineBasicMaterial({ color: '#7360DF', transparent: true, opacity: 0.3 });
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
for (let x = -gridSize; x <= gridSize; x += gridSpacing) {
for (let y = -gridSize; y <= gridSize; y += gridSpacing) {
const geometry = new THREE.PlaneGeometry(gridSpacing, gridSpacing);
const edges = new THREE.EdgesGeometry(geometry);
const lineMaterial = material.clone();
const line = new THREE.LineSegments(edges, lineMaterial);
line.position.set(x, y, 0);
line.userData.targetOpacity = 0;
scene.add(line);
}
}
// Handle mouse move event
window.addEventListener(
'mousemove',
(event) => {
event.preventDefault();
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
// Reset target opacity for all objects
for (let i = 0; i < scene.children.length; i++) {
scene.children[i].userData.targetOpacity = 0;
}
// Set target opacity for the intersected objects
const intersects = raycaster.intersectObjects(scene.children);
for (let i = 0; i < intersects.length; i++) {
intersects[i].object.userData.targetOpacity = 1;
}
},
false
);
// Animation function
const animate = () => {
requestAnimationFrame(animate);
// Interpolate opacity for all objects
for (let i = 0; i < scene.children.length; i++) {
const line = scene.children[i];
if (line.material.opacity < line.userData.targetOpacity) {
// If the line is appearing, use the appearing speed
line.material.opacity = THREE.MathUtils.lerp(line.material.opacity, line.userData.targetOpacity, line.userData.appearingSpeed);
} else {
// If the line is disappearing, use the disappearing speed
line.material.opacity = THREE.MathUtils.lerp(line.material.opacity, line.userData.targetOpacity, line.userData.disappearingSpeed);
}
}
renderer.render(scene, camera);
};
// In the grid creation loop
for (let x = -gridSize; x <= gridSize; x += gridSpacing) {
for (let y = -gridSize; y <= gridSize; y += gridSpacing) {
const geometry = new THREE.PlaneGeometry(gridSpacing, gridSpacing);
const edges = new THREE.EdgesGeometry(geometry);
const lineMaterial = material.clone();
const line = new THREE.LineSegments(edges, lineMaterial);
line.position.set(x, y, 0);
line.userData.targetOpacity = 0;
line.userData.appearingSpeed = 0.29; // Adjust this value to control the appearing speed
line.userData.disappearingSpeed = 0.08; // Adjust this value to control the disappearing speed
scene.add(line);
}
}
// Handle window resize
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
// Handle mouse out event
window.addEventListener(
'mouseout',
() => {
// Set target opacity for all objects to 0
for (let i = 0; i < scene.children.length; i++) {
scene.children[i].userData.targetOpacity = 0;
//scene.children[i].material.color.set('#b203d0e3');
}
},
false
);
// Start animation
animate();
// Create an intersection observer
</script>
<script type="module" src="./src/main.jsx"></script>
</body>
</html>