three模拟液体流动动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：three模拟液体流动动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {margin:0px; padding:0px; overflow: hidden}
</style>


  
  
</head>

<body >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.156.js"></script>
  
      <script >
let fluid,paint,count = 0,canvas;
function init() {
  const renderer = new
  THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  canvas = renderer.domElement;
  document.body.appendChild(canvas);

  // Calculate half fov radians for camera setup
  const fov = 65;
  const hFovRadian = fov / 2 / 180 * Math.PI;
  const cz = window.innerHeight / 2 / Math.tan(hFovRadian);

  // Setup camera
  const camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, 0.1, cz * 4);
  camera.position.z = cz;

  // Create context object to hold renderer, camera and dimensions
  const context = { renderer, camera, width: window.innerWidth, height: window.innerHeight };

  // Initialize fluid and paint simulations
  fluid = new Fluid(context);
  paint = new Paint(context);
}

async function animate() {
  if (count % 640 == 0) {
    fluid.init();
    paint.init();
  }
  count++;

  fluid.update();
  fluid.draw();
  paint.update(fluid.getVelocity());
  paint.draw();
  requestAnimationFrame(animate);
}


//----------------------------------------

class Fluid {
  constructor(context) {
    this.context = context;
    this.speed = 4;
    this.forceInitMaterial = this.createShaderMaterial(forceInitFrag);
    this.divergenceMaterial = this.createShaderMaterial(divergenceFrag);
    this.advectionMaterial = this.createShaderMaterial(advectionFrag);
    this.pressureMaterial = this.createShaderMaterial(pressureFrag);
    this.updateMaterial = this.createShaderMaterial(forceUpdateFrag);
    this.renderMaterial = this.createShaderMaterial(forceRenderFrag);
    this.velocity = [this.createRenderTarget(), this.createRenderTarget()];
    this.pressure = [this.createRenderTarget(), this.createRenderTarget()];
    this.divergence = this.createRenderTarget();
    this.advection = this.createRenderTarget();
    this.blank = this.createRenderTarget();

    // Main Scene
    this.mainScene = new THREE.Scene();
    this.mainMesh = this.createMesh(0, 0, this.context.width, this.context.height);
    this.mainScene.add(this.mainMesh);

    this.init();
  }

  init() {
    this.velocityIndex = 0;
    this.context.renderer.setRenderTarget(this.velocity[0]);
    this.mainMesh.material = this.forceInitMaterial;
    this.forceInitMaterial.uniforms.seed = { value: Math.random() * 100.0 };
    this.context.renderer.render(this.mainScene, this.context.camera);
    this.context.renderer.setRenderTarget(null);
  }

  createShaderMaterial(frag) {
    return new THREE.ShaderMaterial({
      vertexShader: vert,
      fragmentShader: frag,
      uniforms: { tex: { value: null }, res: { value: [this.context.width, this.context.height] }, speed: { value: this.speed } } });

  }

  createRenderTarget() {
    return new THREE.WebGLRenderTarget(this.context.width, this.context.height, {
      format: THREE.RGBAFormat,
      type: THREE.FloatType });

  }

  createMesh(cx, cy, w, h) {
    const geometry = new THREE.PlaneGeometry(w, h);
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = cx;
    mesh.position.y = cy;
    return mesh;
  }

  update() {
    this.updateAdvection();
    this.updateDivergence();
    this.updatepPressure();
    this.updateVelocity();
  }

  updateAdvection() {
    this.context.renderer.setRenderTarget(this.advection);
    this.mainMesh.material = this.advectionMaterial;
    this.advectionMaterial.uniforms.tex = { value: this.velocity[this.velocityIndex].texture };
    this.context.renderer.render(this.mainScene, this.context.camera);
    this.context.renderer.setRenderTarget(null);
  }

  updateDivergence() {
    this.context.renderer.setRenderTarget(this.divergence);
    this.mainMesh.material = this.divergenceMaterial;
    this.divergenceMaterial.uniforms.tex = { value: this.advection.texture };
    this.context.renderer.render(this.mainScene, this.context.camera);
    this.context.renderer.setRenderTarget(null);
  }

  updatepPressure() {
    this.context.renderer.setRenderTarget(this.pressure[0]);
    this.context.renderer.clear();
    this.context.renderer.setRenderTarget(null);

    for (let i = 0; i < 4; i++) {
      let i0 = i % 2;
      let i1 = (i + 1) % 2;
      const prevPressure = this.pressure[i0];
      const nextPressure = this.pressure[i1];

      this.context.renderer.setRenderTarget(nextPressure);
      this.mainMesh.material = this.pressureMaterial;
      this.pressureMaterial.uniforms.tex = { value: prevPressure.texture };
      this.pressureMaterial.uniforms.divergence = { value: this.divergence.texture };
      this.context.renderer.render(this.mainScene, this.context.camera);
      this.context.renderer.setRenderTarget(null);
    }
  }

  updateVelocity() {
    const i1 = (this.velocityIndex + 1) % 2;
    const nextVelocity = this.velocity[i1];
    this.velocityIndex = i1;

    this.context.renderer.setRenderTarget(nextVelocity);
    this.mainMesh.material = this.updateMaterial;
    this.updateMaterial.uniforms.pressure = { value: this.pressure[1].texture };
    this.updateMaterial.uniforms.advection = { value: this.advection.texture };
    this.context.renderer.render(this.mainScene, this.context.camera);
    this.context.renderer.setRenderTarget(null);
  }

  draw() {
    this.mainMesh.material = this.renderMaterial;
    this.renderMaterial.uniforms.tex = { value: this.getVelocity().texture };
    this.context.renderer.render(this.mainScene, this.context.camera);
  }

  getVelocity() {
    return this.velocity[this.velocityIndex];
  }}


class Paint {
  constructor(context) {
    this.context = context;
    this.speed = 4;
    this.initMaterial = this.createShaderMaterial(paintInitFrag);
    this.updateMaterial = this.createShaderMaterial(paintUpdateFrag);
    this.renderMaterial = this.createShaderMaterial(paintRenderFrag);
    this.paint = [this.createRenderTarget(), this.createRenderTarget()];

    // Main Scene
    this.mainScene = new THREE.Scene();
    this.mainMesh = this.createMesh(0, 0, this.context.width, this.context.height);
    this.mainScene.add(this.mainMesh);

    this.init();
  }

  init() {
    this.paintIndex = 0;
    this.context.renderer.setRenderTarget(this.paint[0]);
    this.mainMesh.material = this.initMaterial;
    this.initMaterial.uniforms.seed = { value: Math.random() * 100.0 };
    this.context.renderer.render(this.mainScene, this.context.camera);
    this.context.renderer.setRenderTarget(null);
  }

  createShaderMaterial(frag) {
    return new THREE.ShaderMaterial({
      vertexShader: vert,
      fragmentShader: frag,
      uniforms: { tex: { value: null }, res: { value: [this.context.width, this.context.height] }, speed: { value: this.speed } } });

  }

  createRenderTarget() {
    return new THREE.WebGLRenderTarget(this.context.width, this.context.height, {
      format: THREE.RGBAFormat,
      type: THREE.FloatType });

  }

  createMesh(cx, cy, w, h) {
    const geometry = new THREE.PlaneGeometry(w, h);
    const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const mesh = new THREE.Mesh(geometry, material);
    mesh.position.x = cx;
    mesh.position.y = cy;
  .........完整代码请登录后点击上方下载按钮下载查看