HTML/JS animace
Vytvoření interaktivní 3D particle animace pomocí HTML, CSS a JavaScriptu.
Prompt
Create an interactive 3D particle animation using HTML, CSS and JavaScript (using Three.js from CDN). The animation should: display 5000 colorful particles rotating in a galaxy-like spiral, respond to mouse movement (tilt), have a starfield background, and show FPS counter in the corner. Make it visually impressive with smooth animations. Include everything in a single HTML file.
Výsledky napříč modely
| Model | Run | Tokens/s | Délka (s) | Tokeny | GPU VRAM | OK | Kvalita | Datum | Výstup |
|---|---|---|---|---|---|---|---|---|---|
| deepseek-coder-v2:16b | #1 | 14.76 | 116.5 | 1217 | 15478 MB | ✅ | - | 19.05.2026 | |
| deepseek-coder-v2:16b | #1 | 16.66 | 73.9 | 1187 | 15476 MB | ✅ | - | 19.05.2026 | |
| qwen3-coder:30b | #1 | 9.17 | 318.3 | 2578 | 15456 MB | ✅ | - | 19.05.2026 | |
| gemma4:e4b | #1 | 16.99 | 174.3 | 2918 | 14292 MB | ✅ | - | 19.05.2026 | |
| deepseek-coder-v2:16b | #1 | 17.42 | 81.0 | 1363 | 15536 MB | ✅ | - | 19.05.2026 | |
| qwen3-coder:30b | #1 | 8.84 | 393.8 | 2308 | 15461 MB | ✅ | - | 18.05.2026 | |
| deepseek-coder-v2:16b | #1 | 17.25 | 103.5 | 1273 | 15541 MB | ✅ | - | 18.05.2026 | |
| gemma4:e4b | #1 | 17.82 | 156.4 | 2744 | 14310 MB | ✅ | - | 18.05.2026 |
Vygenerované výstupy
deepseek-coder-v2:16b
To create an interactive 3D particle animation using HTML, CSS, and JavaScript with Three.js from CDN, you can follow the steps below. This example includes a starfield background, colorful particles rotating in a spiral galaxy-like motion, and responds to mouse movement by tilting the camera. Additionally, it displays an FPS counter in the corner for performance monitoring.
Here's how you can set up this project:
```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 Animation</title>
<style>
body { margin: 0; }
canvas { display: block; }
#fps { position: absolute; top: 10px; left: 10px; color: white; }
</style>
</head>
<body>
<div id="fps">FPS: N/A</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Create a starfield background
const starsGeometry = new THREE.BufferGeometry();
const count = 5000;
const positions = new Float32Array(count * 3);
for (let i = 0; i < count; i++) {
positions[i * 3] = (Math.random() - 0.5) * 2000;
positions[i * 3 + 1] = (Math.random() - 0.5) * 2000;
positions[i * 3 + 2] = Math.random() * 2000;
}
starsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const starMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 1 });
const stars = new THREE.Points(starsGeometry, starMaterial);
scene.add(stars);
// Create particles
const particleGeometry = new THREE.BufferGeometry();
const particles = new Float32Array(count * 3);
for (let i = 0; i < count; i++) {
particles[i * 3] = (Math.random() - 0.5) * 100;
particles[i * 3 + 1] = (Math.random() - 0.5) * 100;
particles[i * 3 + 2] = Math.random() * 100;
}
particleGeometry.setAttribute('position', new THREE.BufferAttribute(particles, 3));
const particleMaterial = new THREE.PointsMaterial({ color: 0x88ccdd, size: 2 });
const particlesMesh = new THREE.Points(particleGeometry, particleMaterial);
scene.add(particlesMesh);
camera.position.z = 1000;
// Handle window resize
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
// Animation loop
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const elapsedTime = clock.getElapsedTime();
// Rotate particles and stars
particlesMesh.rotation.x += 0.005;
particlesMesh.rotation.y += 0.005;
stars.rotation.z += 0.001;
// Update camera based on mouse movement
const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
camera.rotation.x = mouseY * 0.1;
camera.rotation.y = mouseX * 0.1;
renderer.render(scene, camera);
}
animate();
// FPS counter
let fps = 0;
function displayFPS() {
const div = document.getElementById('fps');
div.textContent = `FPS: ${fps}`;
requestAnimationFrame(displayFPS);
}
displayFPS();
</script>
</body>
</html>
```
This code sets up a basic Three.js scene with a starfield and particles, animates them in a simple way, and updates the camera based on mouse movement for interaction. The FPS counter is updated every frame using requestAnimationFrame.deepseek-coder-v2:16b
To create an interactive 3D particle animation using HTML, CSS, and JavaScript with Three.js from CDN, you can follow the steps below. This example will include colorful particles rotating in a galaxy-like spiral, respond to mouse movement (tilt), have a starfield background, and show an FPS counter in the corner.
Here's a complete HTML file that sets up this animation:
```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 Animation</title>
<style>
body { margin: 0; }
canvas { display: block; }
#fps { position: absolute; top: 10px; left: 10px; color: white; }
</style>
</head>
<body>
<div id="fps">FPS: 0</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Starfield background
const starsGeometry = new THREE.BufferGeometry();
const starPositions = [];
for (let i = 0; i < 5000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = (Math.random() - 0.5) * 2000;
const z = Math.random() * 4000 - 2000;
starPositions.push(x, y, z);
}
starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3));
const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 1 });
const starsMesh = new THREE.Points(starsGeometry, starsMaterial);
scene.add(starsMesh);
// Particle system
const particlesGeometry = new THREE.BufferGeometry();
const particlePositions = [];
const particleColors = [];
for (let i = 0; i < 5000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = (Math.random() - 0.5) * 2000;
const z = Math.random() * 4000 - 2000;
particlePositions.push(x, y, z);
particleColors.push(Math.random(), Math.random(), Math.random());
}
particlesGeometry.setAttribute('position', new THREE.Float32BufferAttribute(particlePositions, 3));
const particlesMaterial = new THREE.PointsMaterial({ size: 0.5, vertexColors: true });
const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particlesMesh);
camera.position.z = 1000;
// Mouse movement response
let mouseX = 0, mouseY = 0;
window.addEventListener('mousemove', (event) => {
mouseX = event.clientX - window.innerWidth / 2;
mouseY = event.clientY - window.innerHeight / 2;
});
// Animation loop
function animate() {
requestAnimationFrame(animate);
const tiltAngleX = (mouseX / window.innerWidth) * 0.1;
const tiltAngleY = -(mouseY / window.innerHeight) * 0.1;
camera.rotation.x += tiltAngleX;
camera.rotation.y += tiltAngleY;
renderer.render(scene, camera);
}
// FPS counter
let fps = 0;
const startTime = Date.now();
function countFPS() {
fps++;
const elapsedTime = Date.now() - startTime;
if (elapsedTime >= 1000) {
document.getElementById('fps').textContent = `FPS: ${fps}`;
fps = 0;
startTime = Date.now();
}
requestAnimationFrame(countFPS);
}
countFPS();
animate();
</script>
</body>
</html>
```
This code sets up a basic Three.js scene with a starfield background and particles that rotate in response to mouse movement. The FPS counter is updated every second, providing real-time performance feedback. You can copy this code into an HTML file and open it in your browser to see the animation.qwen3-coder:30b
# Interactive 3D Galaxy Particle Animation
I'll create an impressive interactive 3D galaxy animation with 5000 particles, mouse interaction, starfield background, and FPS counter - all in a single HTML file.
```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 Galaxy</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background: #000;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: white;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
}
#info {
position: absolute;
top: 20px;
left: 20px;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
padding: 15px;
border-radius: 10px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
#info h1 {
font-size: 1.8rem;
margin-bottom: 10px;
background: linear-gradient(90deg, #ff7eb3, #ff70a6, #ff5296);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 10px rgba(255, 110, 179, 0.3);
}
#info p {
margin: 5px 0;
font-size: 0.9rem;
opacity: 0.8;
}
#fps-counter {
position: absolute;
top: 20px;
right: 20px;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
padding: 10px 15px;
border-radius: 10px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: monospace;
font-size: 1.2rem;
}
#instructions {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
background: rgba(0, 0, 0, 0.7);
padding: 10px 20px;
border-radius: 20px;
backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
font-size: 0.9rem;
opacity: 0.8;
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div id="info">
<h1>Interactive 3D Galaxy</h1>
<p>5,000 colorful particles in spiral formation</p>
<p>Move mouse to tilt the galaxy</p>
</div>
<div id="fps-counter">FPS: 0</div>
<div id="instructions">Move mouse to interact | Scroll to zoom</div>
</div>
<script>
// Main variables
let scene, camera, renderer, controls;
let particles, particleSystem;
let mouseX = 0, mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let clock = new THREE.Clock();
let stats = { fps: 0, lastTime: 0 };
// Initialize the scene
function init() {
// Create scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000011);
scene.fog = new THREE.Fog(0x000011, 100, 200);
// Create camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.z = 150;
// Create renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.getElementById('container').appendChild(renderer.domElement);
// Add orbit controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.5;
// Create galaxy particles
createGalaxy();
// Create starfield background
createStarfield();
// Add event listeners
document.addEventListener('mousemove', onDocumentMouseMove);
window.addEventListener('resize', onWindowResize);
// Start animation loop
animate();
}
// Create galaxy particles
function createGalaxy() {
const particleCount = 5000;
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
const sizes = new Float32Array(particleCount);
const color = new THREE.Color();
for (let i = 0; i < particleCount; i++) {
const i3 = i * 3;
// Spiral galaxy formation
const radius = Math.sqrt(Math.random()) * 50;
const angle = Math.random() * Math.PI * 2;
const height = (Math.random() - 0.5) * 10;
positions[i3] = Math.cos(angle) * radius;
positions[i3 + 1] = height;
positions[i3 + 2] = Math.sin(angle) * radius;
// Color variations
const hue = (angle / (Math.PI * 2)) + Math.random() * 0.2;
color.setHSL(hue, 0.8, 0.6);
colors[i3] = color.r;
colors[i3 + 1] = color.g;
colors[i3 + 2] = color.b;
// Random sizes
sizes[i] = Math.random() * 2 + 0.5;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
// Create material
const material = new THREE.PointsMaterial({
size: 1.5,
vertexColors: true,
transparent: true,
opacity: 0.9,
sizeAttenuation: true,
blending: THREE.AdditiveBlending
});
// Create particle system
particleSystem = new THREE.Points(geometry, material);
scene.add(particleSystem);
}
// Create starfield background
function createStarfield() {
const starGeometry = new THREE.BufferGeometry();
const starMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 0.2,
transparent: true,
opacity: 0.8
});
const starVertices = [];
for (let i = 0; i < 10000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = (Math.random() - 0.5) * 2000;
const z = (Math.random() - 0.5) * 2000;
starVertices.push(x, y, z);
}
starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);
}
// Handle mouse movement
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) * 0.0005;
mouseY = (event.clientY - windowHalfY) * 0.0005;
}
// Handle window resize
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
const delta = clock.getDelta();
const elapsedTime = clock.getElapsedTime();
// Update particle system rotation
if (particleSystem) {
particleSystem.rotation.y += 0.001;
particleSystem.rotation.x = mouseY * 0.5;
particleSystem.rotation.z = mouseX * 0.2;
}
// Update camera position based on mouse
camera.position.x += (mouseX * 50 - camera.position.x) * 0.05;
camera.position.y += (-mouseY * 50 - camera.position.y) * 0.05;
camera.lookAt(scene.position);
// Update controls
controls.update();
// Update FPS counter
updateFPS();
// Render the scene
renderer.render(scene, camera);
}
// Update FPS counter
function updateFPS() {
const now = performance.now();
if (now >= stats.lastTime + 1000) {
document.getElementById('fps-counter').textContent = `FPS: ${stats.fps}`;
stats.lastTime = now;
stats.fps = 0;
} else {
stats.fps++;
}
}
gemma4:e4b
This is a complex task requiring precise coordination between 3D geometry generation, event handling, and rendering loops.
The solution below creates a self-contained HTML file that includes the necessary libraries (Three.js), CSS, and JavaScript logic.
### Interactive Galaxy Particle Animation
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Galaxy Particle Field</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000000;
font-family: 'Arial', sans-serif;
}
canvas {
display: block;
}
#fps-counter {
position: fixed;
top: 10px;
left: 10px;
color: #ffffff;
background: rgba(0, 0, 0, 0.5);
padding: 8px 12px;
border-radius: 5px;
z-index: 100;
font-size: 1.1em;
}
</style>
</head>
<body>
<div id="fps-counter">FPS: 0</div>
<!-- Include Three.js from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// --- Global Variables ---
let scene, camera, renderer;
let particles, particleGeometry, particleMaterial;
const PARTICLE_COUNT = 5000;
let mouseX = 0;
let mouseY = 0;
// --- FPS Tracking Variables ---
let frameCount = 0;
let lastTime = performance.now();
const fpsCounterElement = document.getElementById('fps-counter');
// --- Initialization Function ---
function init() {
// 1. Renderer Setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. Scene Setup
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x000000, 0.0005); // Adds depth effect
// 3. Camera Setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 150;
// 4. Particle Generation (The Galaxy Spiral)
generateSpiralParticles();
// 5. Event Listeners
window.addEventListener('resize', onWindowResize, false);
document.addEventListener('mousemove', onDocumentMouseMove, false);
// Start the animation loop
animate();
}
/**
* Generates the 3D coordinates for the spiral galaxy structure.
* Uses BufferGeometry for performance.
*/
function generateSpiralParticles() {
particleGeometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
const color = new THREE.Color();
// Parameters for the spiral shape
const totalAngle = Math.PI * 10; // How many full rotations
const depthScale = 0.8; // How far back the spiral extends
for (let i = 0; i < PARTICLE_COUNT; i++) {
// Calculate the angle (phi) for the particle
const t = (i / PARTICLE_COUNT) * totalAngle;
// Spiral Radius: R = a * t + b (gives the characteristic spiral shape)
// The radius increases as the angle increases
const radius = 10 + (t / totalAngle) * 150;
// X, Y, Z coordinates (Polar to Cartesian)
const x = Math.cos(t) * radius;
const y = Math.sin(t) * radius * 0.5; // Flattened vertically
const z = t * depthScale; // Depth based on angle
positions.push(x, y, z);
// Assign a color based on position/index for gradient effect
// Color shifts from blue/purple (start) to yellow/white (end)
const normalizedT = t / totalAngle;
color.setHSL(0.6 - normalizedT * 0.4, 1, 0.5 + normalizedT * 0.2);
colors.push(color.r, color.g, color.b);
}
// Set geometry attributes
particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
particleGeometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
// Material setup
particleMaterial = new THREE.PointsMaterial({
size: 1.5, // Particle size
vertexColors: true, // Use the colors defined in the geometry
transparent: true,
opacity: 0.8
});
// Create the particle system
particles = new THREE.Points(particleGeometry, particleMaterial);
scene.add(particles);
}
// --- Event Handlers ---
function onWindowResize() {
camera.viewport.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onDocumentMouseMove(event) {
// Normalize mouse coordinates to the range [-1, 1]
mouseX = (event.clientX / window.innerWidth) * 2 - 1;
mouseY = - (event.clientY / window.innerHeight) * 2 + 1;
}
// --- Animation Loop ---
function animate() {
requestAnimationFrame(animate);
// 1. Update Particle Animation
const time = Date.now() * 0.0001;
// Constant rotation (Galaxy spin)
particles.rotation.y += 0.0005;
particles.rotation.x = Math.sin(time * 0.1) * 0.05;
// 2. Mouse Interaction (Tilt)
// The tilt effect rotates the camera/scene based on mouse position
camera.position.x = mouseX * 50;
camera.position.y = mouseY * 50;
camera.lookAt(scene.position); // Keep the focus on the center
// 3. Rendering
renderer.render(scene, camera);
// 4. FPS Counter Update
updateFPS();
}
// --- Utility Functions ---
/**
* Updates the FPS counter display using performance timing.
*/
function updateFPS() {
const currentTime = performance.now();
const elapsed = currentTime - lastTime;
frameCount++;
// Calculate FPS every 500ms for smoother display
if (elapsed >= 500) {
const fps = Math.round(1000 / (elapsed / frameCount));
fpsCounterElement.textContent = `FPS: ${fps}`;
// Reset counters
frameCount = 0;
lastTime = currentTime;
}
}
// --- Execution ---
init();
</script>
</body>
</html>
```deepseek-coder-v2:16b
Creating an interactive 3D particle animation using HTML, CSS, and JavaScript with Three.js involves several steps. Below is a simple implementation that includes all your requirements:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Particle Animation</title>
<style>
body { margin: 0; }
canvas { display: block; }
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Starfield background
const starsGeometry = new THREE.BufferGeometry();
const starsMaterial = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 0.1 });
const starCount = 5000;
const positions = new Float32Array(starCount * 3);
for (let i = 0; i < starCount; i++) {
positions[i * 3] = (Math.random() - 0.5) * 2000;
positions[i * 3 + 1] = (Math.random() - 0.5) * 2000;
positions[i * 3 + 2] = (Math.random() - 0.5) * 2000;
}
starsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const starField = new THREE.Points(starsGeometry, starsMaterial);
scene.add(starField);
// Galaxy-like spiral particles
const particleCount = 5000;
const positionsParticles = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) {
const angle = i / particleCount * Math.PI * 2;
const radius = 5 + Math.random() * 4;
positionsParticles[i * 3] = Math.cos(angle) * radius;
positionsParticles[i * 3 + 1] = Math.sin(angle) * radius;
positionsParticles[i * 3 + 2] = (Math.random() - 0.5) * 40;
const colorIndex = i % 3;
colors[i * 3] = 1; // Red, Green, Blue
colors[i * 3 + 1] = Math.random(); // Random green
colors[i * 3 + 2] = Math.random(); // Random blue
}
const particlesGeometry = new THREE.BufferGeometry();
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positionsParticles, 3));
particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
const particlesMaterial = new THREE.PointsMaterial({ size: 0.1, vertexColors: true });
const particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles);
// Camera setup and animation
camera.position.z = 40;
let mouseX = 0, mouseY = 0;
window.addEventListener('mousemove', (event) => {
mouseX = (event.clientX / window.innerWidth - 0.5) * 2;
mouseY = (event.clientY / window.innerHeight - 0.5) * 2;
});
const clock = new THREE.Clock();
function animate() {
requestAnimationFrame(animate);
const elapsedTime = clock.getElapsedTime();
particles.rotation.x += 0.001;
particles.rotation.y += 0.001;
camera.position.z += (mouseY * 0.05 - camera.position.z) * 0.05;
camera.position.x += (mouseX * 0.05 - camera.position.x) * 0.05;
renderer.render(scene, camera);
}
animate();
// FPS counter
const stats = new Stats();
document.body.appendChild(stats.dom);
function updateStats() {
requestAnimationFrame(updateStats);
stats.begin();
stats.end();
}
updateStats();
</script>
</body>
</html>
```
### Explanation:
1. **Scene Setup**: A Three.js scene is created with a perspective camera and WebGL renderer. The background stars are added using buffer geometry and points material.
2. **Galaxy-like Spiral Particles**: Particle positions and colors are calculated to create a spiral effect, responding to mouse movement for tilt effects.
3. **Camera and Animation**: The camera's position is dynamically adjusted based on mouse movements, creating an interactive experience. Particles rotate smoothly due to continuous rotations applied in the animation loop.
4. **FPS Counter**: A simple FPS (frames per second) counter is added using a library (`stats.js`), which updates every frame for real-time performance monitoring.
This code provides a basic structure, and you can further enhance it by adding more complex geometries or interactions as needed.qwen3-coder:30b
# Interactive 3D Galaxy Particle Animation
I'll create an immersive galaxy animation with 5000 colorful particles, responsive to mouse movement, with a starfield background and FPS counter.
```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 Galaxy Animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background: #000;
font-family: 'Arial', sans-serif;
color: white;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
}
#fps-counter {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.7);
padding: 10px 15px;
border-radius: 10px;
font-size: 14px;
z-index: 100;
}
#title {
position: absolute;
top: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.7);
padding: 15px 20px;
border-radius: 10px;
font-size: 24px;
z-index: 100;
text-align: center;
}
#instructions {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.7);
padding: 10px 20px;
border-radius: 10px;
font-size: 14px;
text-align: center;
z-index: 100;
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div id="title">3D Galaxy Particle System</div>
<div id="fps-counter">FPS: 0</div>
<div id="instructions">Move your mouse to tilt the galaxy | Click and drag to rotate</div>
</div>
<script>
// Main variables
let scene, camera, renderer, particles, controls;
let mouseX = 0, mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
let clock = new THREE.Clock();
let stats = { fps: 0, lastTime: 0 };
// Initialize the scene
function init() {
// Create scene
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000011);
// Create camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.z = 500;
// Create renderer
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.getElementById('container').appendChild(renderer.domElement);
// Add orbit controls
controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.05;
controls.rotateSpeed = 0.5;
// Create galaxy particles
createGalaxy();
// Create starfield background
createStarfield();
// Add event listeners
document.addEventListener('mousemove', onDocumentMouseMove);
window.addEventListener('resize', onWindowResize);
// Start animation loop
animate();
}
// Create galaxy particles
function createGalaxy() {
const particleCount = 5000;
const galaxyRadius = 300;
const armCount = 4;
const armWidth = 0.5;
// Create particle geometry
const geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
const sizes = new Float32Array(particleCount);
// Create particles in spiral arms
for (let i = 0; i < particleCount; i++) {
const radius = Math.random() * galaxyRadius;
const angle = Math.random() * Math.PI * 2;
// Create spiral arms
const armAngle = angle + Math.sin(radius / 50) * 0.5;
const spiralRadius = radius * (0.8 + Math.sin(radius / 30) * 0.2);
const x = Math.cos(armAngle) * spiralRadius;
const y = Math.sin(armAngle) * spiralRadius;
const z = (Math.random() - 0.5) * 20;
positions[i * 3] = x;
positions[i * 3 + 1] = y;
positions[i * 3 + 2] = z;
// Color based on position
const color = new THREE.Color();
const hue = (radius / galaxyRadius) * 0.3 + 0.5;
color.setHSL(hue, 1, 0.5);
colors[i * 3] = color.r;
colors[i * 3 + 1] = color.g;
colors[i * 3 + 2] = color.b;
// Size based on distance from center
sizes[i] = 1 + Math.random() * 3;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
// Create material
const material = new THREE.PointsMaterial({
size: 2,
vertexColors: true,
transparent: true,
opacity: 0.8,
sizeAttenuation: true
});
// Create particle system
particles = new THREE.Points(geometry, material);
scene.add(particles);
}
// Create starfield background
function createStarfield() {
const starCount = 10000;
const starGeometry = new THREE.BufferGeometry();
const starPositions = new Float32Array(starCount * 3);
for (let i = 0; i < starCount; i++) {
const radius = 500 + Math.random() * 1000;
const theta = Math.random() * Math.PI * 2;
const phi = Math.acos(2 * Math.random() - 1);
const x = radius * Math.sin(phi) * Math.cos(theta);
const y = radius * Math.sin(phi) * Math.sin(theta);
const z = radius * Math.cos(phi);
starPositions[i * 3] = x;
starPositions[i * 3 + 1] = y;
starPositions[i * 3 + 2] = z;
}
starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));
const starMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size: 1.5,
sizeAttenuation: true
});
const stars = new THREE.Points(starGeometry, starMaterial);
scene.add(stars);
}
// Mouse move handler
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) * 0.001;
mouseY = (event.clientY - windowHalfY) * 0.001;
}
// Window resize handler
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
}
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Update FPS counter
const delta = clock.getDelta();
stats.fps = Math.round(1 / delta);
document.getElementById('fps-counter').textContent = `FPS: ${stats.fps}`;
// Rotate particles
if (particles) {
particles.rotation.x += 0.0005;
particles.rotation.y += 0.001;
}
// Tilt based on mouse position
if (camera) {
camera.position.x += (mouseX * 10 - camera.position.x) * 0.05;
camera.position.y += (-mouseY * 10 - camera.position.y) * 0.05;
camera.lookAt(scene.position);
}
// Update controls
controls.update();
// Render scene
renderer.render(scene, camera);
}
// Start everything
init();
</script>
</body>
</html>
```
## Features of this Galaxy Animation:
1. **5000 Colorful Particles**: Created in a spiral galaxy pattern with varying colors and sizes
2. **Interactive Controls**:
- Mouse movement tilts the galaxy
- Click and drag to rotate the view
3. **Starfield Background**: 10,000 stars in a distant background
4. **FPS Counter**: Displays real-time frame rate in the top-right corner
5. **Responsive Design**: Adapts to any screen size
6. **Smooth Animations**: Optimized with requestAnimationFrame and damping controls
7. **Visual Effects**:
- Particle sizes vary basdeepseek-coder-v2:16b
To create an interactive 3D particle animation using HTML, CSS, and JavaScript with Three.js from the CDN, you can follow this example below. This code will include a starfield background, colorful particles rotating in a spiral galaxy-like pattern, and a FPS (frames per second) counter responding to mouse movement.
Here's how you can set it up:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Particle Animation</title>
<style>
body { margin: 0; }
canvas { display: block; }
#fps { position: absolute; top: 10px; left: 10px; color: white; }
</style>
</head>
<body>
<div id="fps">FPS: 0</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Starfield background
const starsGeometry = new THREE.BufferGeometry();
const starsMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 0.1 });
let starPositions = [];
for (let i = 0; i < 5000; i++) {
const x = (Math.random() - 0.5) * 2000;
const y = (Math.random() - 0.5) * 2000;
const z = Math.random() * 4000 - 2000;
starPositions.push(x, y, z);
}
starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3));
const stars = new THREE.Points(starsGeometry, starsMaterial);
scene.add(stars);
// Particles
const particleCount = 5000;
const particlesGeometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
for (let i = 0; i < particleCount; i++) {
const x = (Math.random() - 0.5) * 4000;
const y = (Math.random() - 0.5) * 4000;
const z = Math.random() * 4000 - 2000;
positions[i * 3] = x;
positions[i * 3 + 1] = y;
positions[i * 3 + 2] = z;
}
particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const particleMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 2 });
const particles = new THREE.Points(particlesGeometry, particleMaterial);
scene.add(particles);
// Camera position
camera.position.z = 1500;
// Animation loop
let mouseX = 0, mouseY = 0;
const handleMouseMove = (event) => {
mouseX = event.clientX - window.innerWidth / 2;
mouseY = event.clientY - window.innerHeight / 2;
};
document.addEventListener('mousemove', handleMouseMove);
const animate = () => {
requestAnimationFrame(animate);
// Update camera position based on mouse movement
const rotationSpeed = 0.01;
camera.position.x += (mouseX * rotationSpeed) / window.innerWidth;
camera.position.y += (-mouseY * rotationSpeed) / window.innerHeight;
// Rotate particles and stars
particles.rotation.x += 0.01;
particles.rotation.y += 0.01;
stars.rotation.z += 0.005;
renderer.render(scene, camera);
};
animate();
// FPS counter
let fps = 0;
const prevTime = performance.now();
const updateFPS = () => {
const time = performance.now();
const deltaTime = (time - prevTime) / 1000;
if (deltaTime > 1) { // Update FPS every second
fps = Math.round(1 / deltaTime);
document.getElementById('fps').textContent = `FPS: ${fps}`;
prevTime = time;
}
requestAnimationFrame(updateFPS);
};
updateFPS();
</script>
</body>
</html>
```
This code sets up a basic 3D scene with a starfield background and particles that rotate in spiral patterns. The camera responds to mouse movement, creating an interactive experience. An FPS counter is included at the top-left corner of the screen for monitoring performance.gemma4:e4b
This is a complex, highly visual project. To achieve the desired smoothness and performance, we will utilize `THREE.BufferGeometry` for the particles and implement a custom FPS counter and mouse-tracking logic.
Here is the complete, single-file HTML solution.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Galaxy Particle Field</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #000000;
}
canvas {
display: block;
}
#fps-counter {
position: fixed;
top: 20px;
left: 20px;
color: #ffffff;
font-family: 'Arial', sans-serif;
font-size: 18px;
background: rgba(0, 0, 0, 0.5);
padding: 10px 15px;
border-radius: 8px;
z-index: 100;
}
</style>
</head>
<body>
<div id="fps-counter">FPS: 0</div>
<!-- Import Three.js from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// --- Global Variables ---
let scene, camera, renderer;
let galaxyParticles, starParticles;
let mouseX = 0, mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
// --- FPS Counter Logic ---
let frameCount = 0;
let lastTime = performance.now();
const fpsElement = document.getElementById('fps-counter');
/**
* Initializes the Three.js scene, camera, and renderer.
*/
function init() {
// 1. Scene Setup
scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x000000, 1, 1000);
// 2. Camera Setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 50;
// 3. Renderer Setup
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 4. Event Listeners
window.addEventListener('resize', onWindowResize);
document.addEventListener('mousemove', onDocumentMouseMove);
// 5. Create Particle Systems
createGalaxyParticles(5000);
createStarfield(10000);
// Start the animation loop
animate();
}
/**
* Handles window resizing to keep the aspect ratio correct.
*/
function onWindowResize() {
camera.viewport.set(0, 0, 1, 1);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
}
/**
* Tracks mouse movement to influence camera rotation (tilt effect).
*/
function onDocumentMouseMove(event) {
mouseX = (event.clientX - windowHalfX) * 0.5;
mouseY = (event.clientY - windowHalfY) * 0.5;
}
/**
* Creates the main galaxy spiral particle system.
* @param {number} count - Number of particles.
*/
function createGalaxyParticles(count) {
const geometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
const color = new THREE.Color();
for (let i = 0; i < count; i++) {
// Calculate spiral position (using polar coordinates)
const angle = (i / count) * Math.PI * 8; // More wraps = tighter spiral
const distance = Math.sqrt(Math.random()) * 100; // Radius increases with distance
// X, Y, Z coordinates for the spiral
const x = Math.cos(angle) * distance * (1 + Math.random() * 0.5);
const y = Math.sin(angle) * distance * (1 + Math.random() * 0.5);
const z = Math.random() * 200 - 100; // Depth variation
positions.push(x, y, z);
// Assign random vibrant colors
color.setHSL(Math.random(), 1.0, 0.5 + Math.random() * 0.3);
colors.push(color.r, color.g, color.b);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
const material = new THREE.PointsMaterial({
size: 1.5,
vertexColors: true, // Use the colors assigned in the geometry
blending: THREE.AdditiveBlending,
transparent: true,
opacity: 0.8
});
galaxyParticles = new THREE.Points(geometry, material);
scene.add(galaxyParticles);
}
/**
* Creates a simple, distant starfield background.
* @param {number} count - Number of stars.
*/
function createStarfield(count) {
const geometry = new THREE.BufferGeometry();
const positions = [];
for (let i = 0; i < count; i++) {
// Position stars randomly in a massive cube
const x = (Math.random() - 0.5) * 2000;
const y = (Math.random() - 0.5) * 2000;
const z = (Math.random() - 0.5) * 2000;
positions.push(x, y, z);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
const material = new THREE.PointsMaterial({
size: 1.5,
color: 0xaaaaee,
transparent: true,
opacity: 0.7
});
starParticles = new THREE.Points(geometry, material);
scene.add(starParticles);
}
/**
* The main animation loop.
* @param {number} time - Current time provided by requestAnimationFrame.
*/
function animate(time) {
requestAnimationFrame(animate);
// --- 1. Update Particle Positions (Rotation/Movement) ---
const timeFactor = time * 0.0005;
const positions = galaxyParticles.geometry.attributes.position.array;
for (let i = 0; i < 3; i++) { // Iterate through X, Y, Z
for (let j = 0; j < 3; j++) { // Iterate through particle groups (3 components)
const index = j * 3 + i;
// Apply rotation/wave effect to the galaxy
let x = positions[index];
let y = positions[index + 1];
let z = positions[index + 2];
// Gentle sinusoidal movement to make it feel alive
const offset = Math.sin(timeFactor + (j * 0.1)) * 5;
// Rotate around the Z axis based on time
positions[index] = x * Math.cos(timeFactor * 0.2) - y * Math.sin(timeFactor * 0.2);
positions[index + 1] = x * Math.sin(timeFactor * 0.2) + y * Math.cos(timeFactor * 0.2);
positions[index + 2] = z + Math.sin(timeFactor * 0.5 + j * 0.5) * 50;
}
}
galaxyParticles.geometry.attributes.position.needsUpdate = true;
// --- 2. Update Starfield (Slow movement) ---
const starPositions = starParticles.geometry.attributes.position.array;
const speed = 0.0005;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
const index = j * 3 + i;
// Simulate stars moving slowly towards the camera
starPositions[index] += speed;
}
}
starParticles.geometry.attributes.position.needsUpdate = true;
// --- 3. Camera/View Interaction (Tilt) ---
// Smoothly interpolate camera rotation based on mouse input
camera.rotation.y += (mouseX * 0.0001 - camera.rotation.y) * 0.05;
camera.rotation.x += (mouseY * 0.0001 - camera.rotation.x) * 0.05;
// --- 4. Rendering ---
renderer.render(scene, camera);
// --- 5. FPS Calculation ---
frameCount++;
const timeDelta = performance.now() - lastTime;
if (timeDelta >= 1000) {
const fps = Math.round(frameCount * 1000 / timeDelta);
fpsElement.textContent = `FPS: ${fps}`;
// Reset counters
frameCount = 0;
lastTime = performance.now();
}
}
// --- Initialization Call ---
init();
</script>
</body>
</html>
```