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

three模拟液体流动动画效果代码

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