three实现三维立方体粒子化分散动画效果代码-html代码-BFW代码库

three实现三维立方体粒子化分散动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维立方体粒子化分散动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  -ms-scroll-chaining: none;
      overscroll-behavior: none;
}
#container {
  width: 100vw;
  height: 100vh;
}
canvas {
  outline: none;
}
</style>




</head>

<body >
  <div id="container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
      <script >


/** vertex shader source */
const vertexShaderSource = `
varying vec2 vUv;
varying vec3 vPos;
varying vec2 vCoodinates;

attribute vec3 aCoordinates;
attribute float aSpeed;
attribute float aOffset;
attribute float aDirection;
attribute float aPress;

uniform float move;
uniform float time;
uniform float mousePressed;
uniform float transition;

void main () {
  vUv = uv;
  vec3 pos = position;
  
  pos.x += sin(move * aSpeed) * 5.0;
  pos.y += sin(move * aSpeed) * 5.0;
  pos.z = position.z + move * 20.0 * aSpeed + aOffset;
  
  pos = mix(pos, position, transition);
  
  vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
  gl_PointSize = 3000.0 * (1.0 / -mvPosition.z);
  gl_Position = projectionMatrix * mvPosition;
  
  vCoodinates = aCoordinates.xy;
  vPos = pos;
}

`;

/** fragment shader source */
const fragmentShaderSource = `
varying vec2 vCoodinates;
varying vec3 vPos;

uniform sampler2D t1;
uniform sampler2D t2;
uniform sampler2D mask;
uniform float move;

void main () {
  vec4 maskTexture = texture2D(mask, gl_PointCoord);
  vec2 myUV = vec2(vCoodinates.x / 512.0, vCoodinates.y / 512.0);
  vec4 tt1 = texture2D(t1, myUV);
  vec4 tt2 = texture2D(t2, myUV);
  
  vec4 final = mix(tt1, tt2, smoothstep(0.0, 1.0, fract(move)));
  
  float alpha = 1.0 - clamp(0.0, 1.0, abs(vPos.z / 900.0));
  gl_FragColor = final;
  gl_FragColor.a *= maskTexture.r * alpha;
}

`;

const getRandomNumber = (min, max) => {
  return Math.random() * (max - min) + min;
};

/**
 * class Sketch
 */
class Sketch {
  constructor() {
    this.animationId = null;
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    document.getElementById('container').appendChild(this.renderer.domElement);
    this.camera = null;
    this.scene = null;
    this.controls = null;
    this.time = null;
    this.mouse = null;
    this.point = null;
    this.init();
  }

  init() {
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 3000);
    this.camera.position.z = 1000;
    this.scene = new THREE.Scene();

    this.textures = [
    new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png'),
    new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png'),
    new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png'),
    new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png'),
    new THREE.TextureLoader().load('//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png')];


    this.time = 0;
    this.move = 0;
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    this.addMesh();
    this.render();
  }

  addMesh() {
  .........完整代码请登录后点击上方下载按钮下载查看