```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive 3D Particle Wave</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script type="module">
        import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.js';

        let scene, camera, renderer, particles;

        function init() {
            // Scene setup
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x000000);

            // Camera setup
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 5;

            // Renderer setup
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // Particle system for wave
            const geometry = new THREE.BufferGeometry();
            const positions = [];
            const particleCount = 10000;

            for (let i = 0; i < particleCount; i++) {
                positions.push(
                    Math.random() * 4 - 2,
                    Math.random() * 4 - 2,
                    Math.random() * 4 - 2
                );
            }

            geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

            const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.02 });
            particles = new THREE.Points(geometry, material);
            scene.add(particles);

            // Add text
            const loader = new THREE.FontLoader();
            loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
                const textGeometry = new THREE.TextGeometry('dream harder', {
                    font: font,
                    size: 0.5,
                    height: 0.1,
                });
                const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
                const textMesh = new THREE.Mesh(textGeometry, textMaterial);
                textMesh.position.set(-2, -2, 0);
                scene.add(textMesh);
            });

            animate();
        }

        function animate() {
            requestAnimationFrame(animate);

            // Animation logic here
            particles.rotation.y += 0.001;

            renderer.render(scene, camera);
        }

        init();

        // Handle window resize
        window.addEventListener('resize', onWindowResize, false);

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>
```

This HTML file creates an interactive 3D particle wave animation using Three.js. The particles form a rotating cloud-like structure with the text "dream harder" displayed in the center. The animation is responsive and will adjust to the browser window size.

## How it Works

This interactive 3D particle wave animation is created using the Three.js library. Here's a step-by-step breakdown of how it works:

- Scene Setup:
```javascript
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
```

A new THREE.Scene is created to hold all the 3D objects. The background color is set to black.

- Camera Setup:
```javascript
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
```

A PerspectiveCamera is set up with a 75-degree field of view, an aspect ratio matching the window size, and near/far clipping planes. The camera is positioned slightly back from the center.

- Renderer Setup:
```javascript
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
```

A WebGLRenderer is created and sized to fill the browser window. It is then added to the HTML document.

- Particle System:
```javascript
const geometry = new THREE.BufferGeometry();
const positions = [];
const particleCount = 10000;

for (let i = 0; i < particleCount; i++) {
    positions.push(
        Math.random() * 4 - 2,
        Math.random() * 4 - 2,
        Math.random() * 4 - 2
    );
}

geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));

const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.02 });
particles = new THREE.Points(geometry, material);
scene.add(particles);
```

A particle system is created to form the wave. A BufferGeometry holds the particle positions, which are randomly generated. A PointsMaterial is used with a white color and small size. The geometry and material are combined to create a Points object, which is added to the scene.

- Text:
```javascript
const loader = new THREE.FontLoader();
loader.load('https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function(font) {
    const textGeometry = new THREE.TextGeometry('dream harder', {
        font: font,
        size: 0.5,
        height: 0.1,
    });
    const textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
    const textMesh = new THREE.Mesh(textGeometry, textMaterial);
    textMesh.position.set(-2, -2, 0);
    scene.add(textMesh);
});
```

3D text saying "dream harder" is created and added to the scene. A FontLoader loads a JSON font file, which is used to create a TextGeometry. A MeshBasicMaterial with white color is applied, and the resulting Mesh is positioned and added to the scene.

- Animation Loop:
```javascript
function animate() {
    requestAnimationFrame(animate);
    particles.rotation.y += 0.001;
    renderer.render(scene, camera);
}
```

The animate function is called recursively using requestAnimationFrame. On each frame, the particle system is rotated slightly, and the scene is rendered using the camera and renderer.

- Responsive Resizing:
```javascript
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
```

An event listener is added to handle window resizing. The camera aspect ratio and renderer size are updated to match the new window size.

With this setup, a mesmerizing particle wave animation is created that responds to the browser window size. The central text adds a nice thematic element to the visualization.









Explore an immersive 3D particle wave animation created with Three.js, featuring a rotating cloud-like structure and the inspiring text 'dream harder'.

Discover a stunning 3D particle wave animation built with Three.js, showcasing a rotating particle system and inspiring text. Learn how it works and explore the code.

Interactive 3D Particle Wave with Three.js