55 lines
1.9 KiB
JavaScript
55 lines
1.9 KiB
JavaScript
// simple_particles.js – lightweight particle background
|
||
import * as THREE from 'https://unpkg.com/three@0.160.0/build/three.module.js';
|
||
|
||
function initBackground(){
|
||
const canvas = document.getElementById('webgl-bg');
|
||
const renderer = new THREE.WebGLRenderer({canvas, alpha:true, antialias:true});
|
||
renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));
|
||
const scene = new THREE.Scene();
|
||
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
|
||
camera.position.z = 3.5;
|
||
|
||
const particleCount = 20000;
|
||
const geometry = new THREE.BufferGeometry();
|
||
const positions = new Float32Array(particleCount * 3);
|
||
const colors = new Float32Array(particleCount * 3);
|
||
const color = new THREE.Color();
|
||
|
||
for(let i=0;i<particleCount;i++){
|
||
const i3 = i*3;
|
||
positions[i3] = (Math.random()-0.5)*20;
|
||
positions[i3+1] = (Math.random()-0.5)*20;
|
||
positions[i3+2] = (Math.random()-0.5)*20;
|
||
const hue = (i/particleCount);
|
||
color.setHSL(hue, 0.7, 0.5);
|
||
colors[i3] = color.r;
|
||
colors[i3+1] = color.g;
|
||
colors[i3+2] = color.b;
|
||
}
|
||
geometry.setAttribute('position', new THREE.BufferAttribute(positions,3));
|
||
geometry.setAttribute('color', new THREE.BufferAttribute(colors,3));
|
||
|
||
const material = new THREE.PointsMaterial({size:0.07, vertexColors:true, transparent:true, opacity:0.8, depthWrite:false});
|
||
const points = new THREE.Points(geometry, material);
|
||
scene.add(points);
|
||
|
||
function animate(time){
|
||
requestAnimationFrame(animate);
|
||
const t = time * 0.001;
|
||
points.rotation.x = t * 0.05;
|
||
points.rotation.y = t * 0.03;
|
||
renderer.render(scene, camera);
|
||
}
|
||
animate();
|
||
|
||
window.addEventListener('resize',()=>{
|
||
const w = window.innerWidth;
|
||
const h = window.innerHeight;
|
||
renderer.setSize(w,h);
|
||
camera.aspect = w/h;
|
||
camera.updateProjectionMatrix();
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', initBackground);
|