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.bo.........完整代码请登录后点击上方下载按钮下载查看