threejs实现三维点状波浪波动动画效果代码-html代码-BFW代码库

threejs实现三维点状波浪波动动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现三维点状波浪波动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">


</head>

<body >
  <script type="x-shader/x-vertex" id="vertexshader">

  attribute float scale;

			void main() {

				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

				gl_PointSize = scale * ( 300.0 / - mvPosition.z );

				gl_Position = projectionMatrix * mvPosition;

			}

		</script>

<script type="x-shader/x-fragment" id="fragmentshader">

  uniform vec3 color;

			void main() {

				if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;

				gl_FragColor = vec4( color, 1.0 );

			}

		</script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
      <script>


const SEPARATION = 100,
AMOUNTX = 50,
AMOUNTY = 50;

let container, stats;
let camera, scene, renderer;

let particles,
count = 0;

let mouseX = 0,
mouseY = 0;

let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {
  container = document.createElement("div");
  document.body.appendChild(container);

  camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  1,
  10000);

  camera.position.z = 1000;

  scene = new THREE.Scene();

  //

  const numParticles = AMOUNTX * AMOUNTY;

  const positions = new Float32Array(numParticles * 3);
  const scales = new Float32Array(numParticles);

  let i = 0,
  j = 0;

  for (let ix = 0; ix < AMOUNTX; ix++) {
    for (let iy = 0; iy < AMOUNTY; iy++) {
      positions[i] = ix * SEPARATION - AMOUNTX * SEPARATION / 2; // x
      positions[i + 1] = 0; // y
      positions[i + 2] = iy * SEPARATION - AMOUNTY * SEPARATION / 2; // z

      scales[j] = 1;

      i += 3;
      j++;
    }
  }

  const geometry = new THREE.BufferGeometry();
  geometry.setAttribute("position", new THR.........完整代码请登录后点击上方下载按钮下载查看