three+webgl实现三维不规则液体旋转变形动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three+webgl实现三维不规则液体旋转变形动画效果代码

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

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

<head>

  <meta charset="UTF-8">



</head>

<body >
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.128.js"></script>
      <script  >
// Reference
// https://towardsdatascience.com/fun-with-html-canvas-lets-make-lava-lamp-plasma-e4b0d89fe778
// https://www.youtube.com/watch?v=8K5wJeVgjrM&t=615s
// Thank you so much.

// sphere vertex shader source
const vertexSphereShader = `
uniform float uTime;
uniform float mouse;
varying vec2 vUv;
float PI = 3.14159265359;

// Reference
// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
// Thank you so much.
float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}

float noise(vec3 p){
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);

    return o4.y * d.y + o4.x * (1.0 - d.y);
}

void main(){
  float noisy = mouse * pow(noise(normal * 2.0 + uTime * 10.0), 2.0);
  
  vec3 newPosition = position + noisy * normal * 100.0;
 
  vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0);
  
  vUv = uv;
  
  gl_Position = projectionMatrix * mvPosition;
}

`;

// sphere fragment shader source
const fragmentSphereShader = `
uniform float uTime;
uniform sampler2D uTexture;
varying vec2 vUv;

void main () {
  vec4 color = texture2D(uTexture, vUv);
  
  gl_FragColor = vec4(color / 3.0);
}
`;

// sphere vertex shader source
const vertexFloorShader = `
uniform float uTime;
uniform float mouse;
varying vec2 vUv;
float PI = 3.14159265359;

// Reference
// https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
// Thank you so much.
float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}

float noise(vec3 p){
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);

    return o4.y * d.y + o4.x * (1.0 - d.y);
}

void main(){
  float noisy = mouse * pow(noise(normal + position.y * position.x +  uTime * 10.0), 2.0);
  
  vec3 newPosition = position + noisy * 2.0 * normal * 300.0;
 
  vec4 mvPosition = modelViewMatrix * vec4(newPosition, 1.0);
  
  vUv = uv;
  
  gl_Position = projectionMatrix * mvPosition;
}

`;

// sphere fragment shader source
const fragmentFloorShader = `
uniform float uTime;
uniform sampler2D uTexture;
varying vec2 vUv;

void main () {
  vec4 color = texture2D(uTexture, vUv);
  
  gl_FragColor = vec4(color / 3.0);
}
`;

/**
 * Mouse class
 */
class Mouse {
  constructor(sketch) {
    this.sketch = sketch;
    this.initialize();
  }

  initialize() {
    this.delta = 0;
    this.mouse = new THREE.Vector3();
    this.setupEvents();

    this.lastX = 0;
    this.lastY = 0;
    this.speed = 0;
  }

  setupEvents() {
    window.addEventListener('scroll', this.onScroll.bind(this), false);
    window.addEventListener('mousemove', this.onMousemove.bind(this), false);
    window.addEventListener('touchmove', this.onTouchmove.bind(this), false);
  }

  onScroll(e) {
    const docScrollTop = window.pageYOffset;
    const docHeight = document.body.scrollHeight - window.innerHeight;
    const scrollPercent = docScrollTop / docHeight;

    this.delta = scrollPercent;
  }

  onMousemove(e) {
    this.mouse.x = e.clientX / window.innerWidth * 2 - 1;
    this.mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    this.mouse.z = 0;

    this.speed =
    Math.sqrt((e.pageX - this.lastX) ** 2 +
    (e.pageY - this.lastY) ** 2) * 0.1;
    this.lastX = e.pageX;
    this.lastY = e.pageY;
  }

  onTouchmove(e) {
    const touch = e.targetTouches[0];

    this.mouse.x = touch.pageX / window.innerWidth * 2 - 1;
    this.mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1;
    this.mouse.z = 0;

    this.speed =
    Math.sqrt((touch.pageX - this.lastX) ** 2 +
    (touch.pageY - this.lastY) ** 2) * 0.5;
    this.lastX = touch.pageX;
    this.lastY = touch.pageY;
  }}


/**
 * class Sketch
 */
class Sketch {
  constructor() {
    this.createCanvas();
    this.setupEvents();
    this.time = new THREE.Clock(true);
    this.mouse = new Mouse(this);
    this.initialize();
  }

  createCanvas() {
    this.renderer =
    new THREE.WebGLRenderer({
      antialias: true,
      alpha: true });


    document.body.appendChild(this.renderer.domElement);
  }

  setupEvents() {
    window.addEventListener('resize', this.onResize.bind(this), false);
  }

  onResize() {
    if (this.preWidth === window.innerWidth && window.innerWidth < 480) {
      return;
    }

    this.initialize();
  }

  initialize() {
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
    }

    this.preWidth = this.width = Math.ceil(window.innerWidth);
    this.height = Math.ceil(window.innerHeight);

    this.scene = new THREE.Scene();

    this.setupCanvas();
    this.setupCamera();
    this.setupLight();
    this.setupShape();

    this.draw();
  }

  setupCanvas() {
    this.renderer.setSize(this.width, this.height);
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setClearColor('#D7D6DA', 1.0);

    this.renderer.domElement.style.position = 'fixed';
    this.renderer.domElement.style.top = '0';
    this.renderer.domElement.style.left = '0';
    this.renderer.domElement.style.width = '100%';
    this.renderer.domElement.style.height = '100%';
    this.renderer.domElement.style.zIndex = '-1';
    this.renderer.domElement.style.outline = 'none';
  }

  setupCamera() {
    const fov = 50;
    const fovRadian = fov / 2 * (Math.PI / 180);

    this.dist = this.height / 2 / Math.tan(fovRadian);
    this.camera =
    new THREE.PerspectiveCamera(
    fov,
    this.width / this.height,
    0.01,
    this.dist * 10);


    this.cameraV = new THREE.Vector3();
    this.cameraP = new THREE.Vector3(0, 0, this.dist);

    this.camera.position.set(this.cameraP.x, this.cameraP.y, this.cameraP.z);
    this.camera.lookAt(new THREE.Vector3());

    this.scene.add(this.camera);
  }

  updateCamera(time) {
    this.cameraV.subVectors(this.mouse.mouse, this.cameraP).multiplyScalar(0.05);
    this.cameraP.add(this.cameraV);

    this.camera.position.set(
    this.cameraP.x * this.dist,
    Math.max(this.cameraP.y * this.dist, -200),
    this.dist);


    this.camera.lookAt(new THREE.Vector3());
  }

  setupLight() {
    // directinal light
    this.directionalLight = new THREE.DirectionalLight(0xffffff);
    this.scene.add(this.directionalLight);

    // point light
    this.spotLight = new THREE.SpotLight(0xffffff);

    this.spotLightV = new THREE.Vector3();
    this.spotLightP = new THREE.Vector3(0, 0, this.dist * 0.1);

    this.spotLight.position.set(this.spotLightP.x, this.spotLightP.y, this.spotLightP.z);
    this.spotLight.lookAt(new THREE.Vector3());

    this.scene.add(this.spotLight);
  }

  updateLight() {
    this.spotLightV.subVectors(this.mouse.mouse, this.spotLightP).multiplyScalar(0.05);
    this.spotLightP.add(this.spotLightV);

    this.spotLight.position.set(
    this.spotLightP.x * this.dist,
    this.spotLightP.y * this.dist,
    this.dist);


    this.spotLight.lookAt(new THREE.Vector3());
  }

  setupShape() {
    this.shape = new Shape(this, 0, 0, 0);
  }

  draw() {
    const time = this.time.getElapsedTime();

    this.shap.........完整代码请登录后点击上方下载按钮下载查看