three.js粒子海浪

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

window.addEventListener("DOMContentLoaded", () => {
  const w = window.innerWidth;
  const h = window.innerHeight;
  const dpr = window.devicePixelRatio;

const fov = 60;
  const fovRad = (fov / 2) * (Math.PI / 180);
  const dist = h / 2 / Math.tan(fovRad);

const clock = new THREE.Clock();
  const particles = 1000;
  const pointSize = 2.5;

const renderer = new THREE.WebGLRenderer();
  renderer.setSize(w, h);
  renderer.setClearColor(new THREE.Color(0x000000), 1.0);
  renderer.setPixelRatio(dpr);

const container = document.getElementById("canvas");
  container.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(fov, w / h, 1, dist * 2);
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 10;

const scene = new THREE.Scene();

const geo = new THREE.BufferGeometry();
  let positions = [];
  let x, y, z;

const width = 400 * (w / h);
  const depth = 400;
  const distance = 5;

for (let x = 0; x < width; x += distance) {
    for (let z = 0; z < depth; z += distance) {
      positions.push(-width / 2 + x, -30, -depth / 2 + z);
    }
  }
  let positionAttribute = new THREE.Float32BufferAttribute(positions, 3);
  geo.addAttribute("position", positionAttribute);

const mat = new THREE.ShaderMaterial({
    uniforms: {
      u_time: {
        value: 0.0
      }
    },
    vertexShader: `
    #define M_PI 3.1415926535897932384626433832795

precision mediump float;
    uniform float u_time;
    void main() {
      vec3 p = position;
      p.y += (
        cos(p.x / M_PI * 8.0 + u_time * 2.0) +
        sin(p.z / M_PI * 8.0 + u_time * 2.0)
      );
      gl_PointSize = 1.5;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);
    }
    `,
    fragmentShader: `
    precision mediump float;
    void main() {
      gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
    `
  });

const mesh = new THREE.Points(geo, mat);
  scene.add(mesh);

render();

function render() {
    const time = clock.getElapsedTime();
    mesh.material.uniforms.u_time.value = time;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg