Skip to content

Commit 3485ded

Browse files
JackBlair87JackBlair87
committed
more
1 parent c633b8f commit 3485ded

File tree

1 file changed

+162
-162
lines changed

1 file changed

+162
-162
lines changed

‎src/renderer/pages/Landing.jsx

Lines changed: 162 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -12,173 +12,173 @@ const Landing = () => {
1212
dispatch(setCurrentRoute(route));
1313
};
1414

15-
useEffect(() => {
16-
// Set up the scene, camera, and renderer
17-
const scene = new THREE.Scene();
18-
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
19-
const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current, antialias: true });
20-
renderer.setSize(window.innerWidth, window.innerHeight);
21-
22-
// Create a sphere geometry
23-
const sphereGeometry = new THREE.SphereGeometry(5, 32, 32);
24-
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x444444, wireframe: true });
25-
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
26-
scene.add(sphere);
27-
28-
// Create particles
29-
const particlesGeometry = new THREE.BufferGeometry();
30-
const particleCount = 2000;
31-
const positions = new Float32Array(particleCount * 3);
32-
const colors = new Float32Array(particleCount * 3);
33-
const velocities = [];
34-
35-
for (let i = 0; i < particleCount; i++) {
36-
const theta = Math.random() * Math.PI * 2;
37-
const phi = Math.acos(Math.random() * 2 - 1);
38-
const radius = Math.random() * 4.5;
39-
40-
positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
41-
positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
42-
positions[i * 3 + 2] = radius * Math.cos(phi);
43-
44-
colors[i * 3] = Math.random();
45-
colors[i * 3 + 1] = Math.random();
46-
colors[i * 3 + 2] = Math.random();
47-
48-
velocities.push(new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).multiplyScalar(0.05));
49-
}
50-
51-
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
52-
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
53-
54-
const particlesMaterial = new THREE.PointsMaterial({
55-
size: 0.1,
56-
vertexColors: true,
57-
blending: THREE.AdditiveBlending,
58-
transparent: true
59-
});
60-
const particles = new THREE.Points(particlesGeometry, particlesMaterial);
61-
scene.add(particles);
62-
63-
// Create lines between particles
64-
// const linesMaterial = new THREE.LineBasicMaterial({
65-
// color: 0x222222,
66-
// opacity: 0.25,
67-
// transparent: true,
68-
// blending: THREE.AdditiveBlending
69-
// });
70-
// const linesGeometry = new THREE.BufferGeometry();
71-
// const lines = new THREE.LineSegments(linesGeometry, linesMaterial);
72-
// scene.add(lines);
73-
74-
// Set camera position
75-
camera.position.z = 10;
76-
77-
// Create a clock for time-based animations
78-
const clock = new THREE.Clock();
79-
80-
// Animation loop
81-
function animate() {
82-
requestAnimationFrame(animate);
83-
84-
const time = clock.getElapsedTime();
85-
86-
// Update particle positions
87-
const positions = particles.geometry.attributes.position.array;
88-
const colors = particles.geometry.attributes.color.array;
89-
const linePositions = [];
90-
91-
for (let i = 0; i < particleCount; i++) {
92-
const i3 = i * 3;
93-
94-
// Chaotic movement
95-
positions[i3] += velocities[i].x + Math.sin(time * 2 + i) * 0.02;
96-
positions[i3 + 1] += velocities[i].y + Math.cos(time * 2 + i) * 0.02;
97-
positions[i3 + 2] += velocities[i].z + Math.sin(time * 3 + i) * 0.02;
98-
99-
// Keep particles inside the sphere
100-
const distance = Math.sqrt(positions[i3]**2 + positions[i3+1]**2 + positions[i3+2]**2);
101-
if (distance > 4.5) {
102-
const factor = 4.5 / distance;
103-
positions[i3] *= factor;
104-
positions[i3 + 1] *= factor;
105-
positions[i3 + 2] *= factor;
106-
107-
// Bounce effect
108-
velocities[i].reflect(new THREE.Vector3(positions[i3], positions[i3+1], positions[i3+2]).normalize());
109-
}
110-
111-
// Dynamic color change
112-
colors[i3] = Math.sin(time + i) * 0.5 + 0.5;
113-
colors[i3 + 1] = Math.cos(time * 1.3 + i) * 0.5 + 0.5;
114-
colors[i3 + 2] = Math.sin(time * 0.7 + i) * 0.5 + 0.5;
115-
116-
// Create lines between nearby particles
117-
for (let j = i + 1; j < particleCount; j++) {
118-
const j3 = j * 3;
119-
const dx = positions[i3] - positions[j3];
120-
const dy = positions[i3 + 1] - positions[j3 + 1];
121-
const dz = positions[i3 + 2] - positions[j3 + 2];
122-
const distance = Math.sqrt(dx*dx + dy*dy + dz*dz);
123-
124-
if (distance < 0.5) {
125-
linePositions.push(positions[i3], positions[i3 + 1], positions[i3 + 2]);
126-
linePositions.push(positions[j3], positions[j3 + 1], positions[j3 + 2]);
127-
}
128-
}
129-
}
130-
131-
particles.geometry.attributes.position.needsUpdate = true;
132-
particles.geometry.attributes.color.needsUpdate = true;
133-
134-
// linesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));
135-
// linesGeometry.attributes.position.needsUpdate = true;
136-
137-
// Rotate the entire scene
138-
scene.rotation.y += 0.001;
139-
scene.rotation.x = Math.sin(time * 0.5) * 0.1;
140-
141-
// Pulsating effect
142-
const scale = 1 + Math.sin(time * 2) * 0.05;
143-
sphere.scale.set(scale, scale, scale);
144-
particles.scale.set(scale, scale, scale);
145-
146-
renderer.render(scene, camera);
147-
}
148-
149-
animate();
150-
151-
// Handle window resizing
152-
const handleResize = () => {
153-
camera.aspect = window.innerWidth / window.innerHeight;
154-
camera.updateProjectionMatrix();
155-
renderer.setSize(window.innerWidth, window.innerHeight);
156-
};
157-
158-
window.addEventListener('resize', handleResize);
159-
160-
// Cleanup
161-
return () => {
162-
window.removeEventListener('resize', handleResize);
163-
// Additional cleanup
164-
scene.remove(sphere);
165-
scene.remove(particles);
166-
// scene.remove(lines);
167-
sphereGeometry.dispose();
168-
sphereMaterial.dispose();
169-
particlesGeometry.dispose();
170-
particlesMaterial.dispose();
171-
// linesGeometry.dispose();
172-
// linesMaterial.dispose();
173-
renderer.dispose();
174-
};
175-
}, []);
15+
// useEffect(() => {
16+
// // Set up the scene, camera, and renderer
17+
// const scene = new THREE.Scene();
18+
// const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
19+
// const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current, antialias: true });
20+
// renderer.setSize(window.innerWidth, window.innerHeight);
21+
22+
// // Create a sphere geometry
23+
// const sphereGeometry = new THREE.SphereGeometry(5, 32, 32);
24+
// const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x444444, wireframe: true });
25+
// const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
26+
// scene.add(sphere);
27+
28+
// // Create particles
29+
// const particlesGeometry = new THREE.BufferGeometry();
30+
// const particleCount = 200;
31+
// const positions = new Float32Array(particleCount * 3);
32+
// const colors = new Float32Array(particleCount * 3);
33+
// const velocities = [];
34+
35+
// for (let i = 0; i < particleCount; i++) {
36+
// const theta = Math.random() * Math.PI * 2;
37+
// const phi = Math.acos(Math.random() * 2 - 1);
38+
// const radius = Math.random() * 4.5;
39+
40+
// positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
41+
// positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
42+
// positions[i * 3 + 2] = radius * Math.cos(phi);
43+
44+
// colors[i * 3] = Math.random();
45+
// colors[i * 3 + 1] = Math.random();
46+
// colors[i * 3 + 2] = Math.random();
47+
48+
// velocities.push(new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).multiplyScalar(0.05));
49+
// }
50+
51+
// particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
52+
// particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
53+
54+
// const particlesMaterial = new THREE.PointsMaterial({
55+
// size: 0.1,
56+
// vertexColors: true,
57+
// blending: THREE.AdditiveBlending,
58+
// transparent: true
59+
// });
60+
// const particles = new THREE.Points(particlesGeometry, particlesMaterial);
61+
// scene.add(particles);
62+
63+
// // Create lines between particles
64+
// // const linesMaterial = new THREE.LineBasicMaterial({
65+
// // color: 0x222222,
66+
// // opacity: 0.25,
67+
// // transparent: true,
68+
// // blending: THREE.AdditiveBlending
69+
// // });
70+
// // const linesGeometry = new THREE.BufferGeometry();
71+
// // const lines = new THREE.LineSegments(linesGeometry, linesMaterial);
72+
// // scene.add(lines);
73+
74+
// // Set camera position
75+
// camera.position.z = 10;
76+
77+
// // Create a clock for time-based animations
78+
// const clock = new THREE.Clock();
79+
80+
// // Animation loop
81+
// function animate() {
82+
// requestAnimationFrame(animate);
83+
84+
// const time = clock.getElapsedTime();
85+
86+
// // Update particle positions
87+
// const positions = particles.geometry.attributes.position.array;
88+
// const colors = particles.geometry.attributes.color.array;
89+
// const linePositions = [];
90+
91+
// for (let i = 0; i < particleCount; i++) {
92+
// const i3 = i * 3;
93+
94+
// // Chaotic movement
95+
// positions[i3] += velocities[i].x + Math.sin(time * 2 + i) * 0.02;
96+
// positions[i3 + 1] += velocities[i].y + Math.cos(time * 2 + i) * 0.02;
97+
// positions[i3 + 2] += velocities[i].z + Math.sin(time * 3 + i) * 0.02;
98+
99+
// // Keep particles inside the sphere
100+
// const distance = Math.sqrt(positions[i3]**2 + positions[i3+1]**2 + positions[i3+2]**2);
101+
// if (distance > 4.5) {
102+
// const factor = 4.5 / distance;
103+
// positions[i3] *= factor;
104+
// positions[i3 + 1] *= factor;
105+
// positions[i3 + 2] *= factor;
106+
107+
// // Bounce effect
108+
// velocities[i].reflect(new THREE.Vector3(positions[i3], positions[i3+1], positions[i3+2]).normalize());
109+
// }
110+
111+
// // Dynamic color change
112+
// colors[i3] = Math.sin(time + i) * 0.5 + 0.5;
113+
// colors[i3 + 1] = Math.cos(time * 1.3 + i) * 0.5 + 0.5;
114+
// colors[i3 + 2] = Math.sin(time * 0.7 + i) * 0.5 + 0.5;
115+
116+
// // Create lines between nearby particles
117+
// for (let j = i + 1; j < particleCount; j++) {
118+
// const j3 = j * 3;
119+
// const dx = positions[i3] - positions[j3];
120+
// const dy = positions[i3 + 1] - positions[j3 + 1];
121+
// const dz = positions[i3 + 2] - positions[j3 + 2];
122+
// const distance = Math.sqrt(dx*dx + dy*dy + dz*dz);
123+
124+
// if (distance < 0.5) {
125+
// linePositions.push(positions[i3], positions[i3 + 1], positions[i3 + 2]);
126+
// linePositions.push(positions[j3], positions[j3 + 1], positions[j3 + 2]);
127+
// }
128+
// }
129+
// }
130+
131+
// particles.geometry.attributes.position.needsUpdate = true;
132+
// particles.geometry.attributes.color.needsUpdate = true;
133+
134+
// // linesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));
135+
// // linesGeometry.attributes.position.needsUpdate = true;
136+
137+
// // Rotate the entire scene
138+
// scene.rotation.y += 0.001;
139+
// scene.rotation.x = Math.sin(time * 0.5) * 0.1;
140+
141+
// // Pulsating effect
142+
// const scale = 1 + Math.sin(time * 2) * 0.05;
143+
// sphere.scale.set(scale, scale, scale);
144+
// particles.scale.set(scale, scale, scale);
145+
146+
// renderer.render(scene, camera);
147+
// }
148+
149+
// animate();
150+
151+
// // Handle window resizing
152+
// const handleResize = () => {
153+
// camera.aspect = window.innerWidth / window.innerHeight;
154+
// camera.updateProjectionMatrix();
155+
// renderer.setSize(window.innerWidth, window.innerHeight);
156+
// };
157+
158+
// window.addEventListener('resize', handleResize);
159+
160+
// // Cleanup
161+
// return () => {
162+
// window.removeEventListener('resize', handleResize);
163+
// // Additional cleanup
164+
// scene.remove(sphere);
165+
// scene.remove(particles);
166+
// // scene.remove(lines);
167+
// sphereGeometry.dispose();
168+
// sphereMaterial.dispose();
169+
// particlesGeometry.dispose();
170+
// particlesMaterial.dispose();
171+
// // linesGeometry.dispose();
172+
// // linesMaterial.dispose();
173+
// renderer.dispose();
174+
// };
175+
// }, []);
176176

177177
return (
178178
<div className="flex-grow flex overflow-hidden bg-background">
179179
<canvas ref={canvasRef} className="absolute inset-0" />
180180
<div className="w-full h-screen flex flex-col items-center justify-center relative z-10">
181-
<h1 className="text-6xl font-bold text-white">Surfer</h1>
181+
<h1 className="text-6xl font-bold">Surfer</h1>
182182
<button
183183
onClick={() => handleNavigation('/home')}
184184
className="mt-4 px-4 py-2 bg-blue-500 rounded hover:bg-blue-600 text-white"

0 commit comments

Comments
 (0)