threejs实现一个canvas webgl多彩三维水母游动动画效果代码-html代码-BFW代码库

threejs实现一个canvas webgl多彩三维水母游动动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现一个canvas webgl多彩三维水母游动动画效果代码，可拖动旋转。

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

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

<head>

  <meta charset="UTF-8">

  
<style>
html, body {
  margin: 0;
  overflow: hidden;
}

#canvas {
  display: block;
  width: 100vw;
  height: 100vh;
}
</style>



</head>

<body >
  <canvas id="canvas" />

<script type="x-shader" id="shader_vertex">
#define PI 3.1415926535897932384626433832795

const float TAU = PI * 2.0;

uniform float u_time;

varying vec3 v_mod_pos;
varying vec3 v_orig_pos;
varying float v_tail_bumps;
varying float v_head_swirl;
varying float v_head_bumps;

float get_area(float begin, float end, float value) {
  return step(begin, value) - step(end, value);
}

float get_normalized_range(float begin, float end, float value) {
  float range = end - begin;
  return value / range;
}

void main() {

  vec4 model_position = modelMatrix * vec4(position, 1.0);

  // the original position of the vertices
  vec3 orig_pos = model_position.xyz;
  // the modified position of the vertices
  vec3 mod_pos = model_position.xyz;

  // scale down bottom part
  mod_pos.xz *= 1.0 - smoothstep(0.05, -0.4, orig_pos.y) * 0.2;
  // pinch tail
  mod_pos.xz *= 1.0 - smoothstep(0.05, -1.0, orig_pos.y);
  // stretch tail
  mod_pos.y *= 1.0 + smoothstep(0.0, -1.0, orig_pos.y) * 2.0;

  // curl tail in beneath head
  float area_curled_under_head = smoothstep(0.1, 0.0, orig_pos.y) - smoothstep(-0.1, 0.0, orig_pos.y);
  float area_curled_under_head_position = clamp(get_normalized_range(0.1, -0.1, orig_pos.y), 0.0, 1.0);
  mod_pos.y += sin(area_curled_under_head_position * PI * 0.5) * area_curled_under_head * 0.5;

  float swim_speed = u_time * 2.0 + sin(u_time * 2.0 + PI) * 0.5 + snoise2(vec2(u_time * 0.02, 0.0));

  // entire swimming motion
  mod_pos.y += sin(swim_speed + mod_pos.y + PI * 0.4) * 0.15;

  // wiggly head swimming motion
  mod_pos.x += sin(swim_speed * 0.5 + mod_pos.y * 3.5) * 0.15 * clamp(orig_pos.y - 0.3, 0.0, 1.0) * smoothstep(-0.6,-0.4, orig_pos.y);
  mod_pos.z += cos(swim_speed * 0.5 + mod_pos.y * 3.7) * 0.15 * clamp(orig_pos.y - 0.3, 0.0, 1.0) * smoothstep(-0.6,-0.4, orig_pos.y);

  // head swimming motion
  float swimming_head_area = 1.0 - smoothstep(-0.2, -0.4, orig_pos.y);
  mod_pos.x *= 1.0 + sin(swim_speed + orig_pos.y) * (swimming_head_area * 0.15 + (0.1 * orig_pos.y));
  mod_pos.z *= 1.0 + sin(swim_speed + orig_pos.y) * (swimming_head_area * 0.15 + (0.1 * orig_pos.y));
  mod_pos.y *= 1.0 + sin(swim_speed + orig_pos.y + PI * 0.75) * swimming_head_area * 0.1;

  // head swirl
  float head_swirl_angle = atan(orig_pos.x, orig_pos.z);
  float head_.........完整代码请登录后点击上方下载按钮下载查看