Creating abstract graphics with WebGL - Code Samples

import { useRef, useEffect } from 'react';
import * as THREE from 'three';
 
const Waves = () => {
  const canvasRef = useRef();
 
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current });
 
    const geometry = new THREE.PlaneGeometry(200, 200, 40, 40);
    const material = new THREE.MeshPhongMaterial({ color: 0x156289, emissive: 0x072534, side: THREE.DoubleSide, flatShading: true });
    const plane = new THREE.Mesh(geometry, material);
    scene.add(plane);
 
    camera.position.z = 100;
 
    const animate = () => {
      requestAnimationFrame(animate);
 
      const time = Date.now() * 0.001;
      const vertices = plane.geometry.attributes.position.array;
 
      for (let i = 0; i < vertices.length; i += 3) {
        vertices[i + 2] = Math.sin(i * 0.1 + time) * 10;
      }
 
      plane.geometry.attributes.position.needsUpdate = true;
 
      renderer.render(scene, camera);
    };
 
    animate();
  }, []);
 
  return <canvas ref={canvasRef} />;
};
 
export default Waves;

import { useRef, useEffect } from 'react';
import * as THREE from 'three';
 
const ParticleSystem = () => {
  const canvasRef = useRef();
 
  useEffect(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.current });
 
    const particles = new THREE.BufferGeometry();
    const particleCount = 10000;
 
    const positions = new Float32Array(particleCount * 3);
 
    for (let i = 0; i < particleCount * 3; i++) {
      positions[i] = (Math.random() - 0.5) * 200;
    }
 
    particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
 
    const material = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 0.1 });
 
    const particleSystem = new THREE.Points(particles, material);
    scene.add(particleSystem);
 
    camera.position.z = 50;
 
    const animate = () => {
      requestAnimationFrame(animate);
 
      particleSystem.rotation.x += 0.001;
      particleSystem.rotation.y += 0.001;
 
      renderer.render(scene, camera);
    };
 
    animate();
  }, []);
 
  return <canvas ref={canvasRef} />;
};
 
export default ParticleSystem;