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