webgl+canvas实现三个不同形状三维立体棒棒糖旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：webgl+canvas实现三个不同形状三维立体棒棒糖旋转动画效果代码

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

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

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

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


  
  
</head>

<body translate="no">
  <canvas id="myCanvas"></canvas>
  
      <script >
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl2');

const vertexShaderSource = `#version 300 es

in vec2 a_position;

void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
}
`;

const fragmentShaderSource = `#version 300 es

precision highp float;

uniform vec2 iResolution; // Declare as vec2 (canvas width and height)
uniform vec2 iMouse;
uniform float iTime;

out vec4 fragColor;

// Shadertoy code here

#define PI 3.14159265359
#define RES iResolution
#define smax smoothmax
#define rot(a) mat2(cos(a-vec4(0,11,33,0))) // shorthand for rotating objects
#define orbit p.x+=cos(pos +iTime/5.)*pivot/2., p.z+=sin(pos +iTime/5.)*pivot // rotating the objects by setting their x and z coordinates using sine and cosine; using this because I want the x to be scaled by 2

float smoothmax(float d1, float d2, float k) {
    float h = max(k - abs(d1 - d2), 0.) / k;
    return max(d1, d2) + h * h * k * (1. / 4.);
}

// initializing some variables globally so they can inherit values from other functions

int partID; // for assigning colors to objects
float pivot = 4.; // radius of the circle in which the objects are spinning

// Signed distance function for a 3D line segment
float map(vec3 p) {

  p.z+=pivot; // moving the pivot point from point 0 by the radius of the circular orbit

  // Tall helical swirly lollipop:
  float pos = PI*4./3.; // its position on the circle 

  vec3 p0 = p; // the base to cycle back to after defining each object
  orbit; // shorthand for the orbiting motion
  p.xz*=rot(iTime), p.xy*=rot(PI/6.); // rotate around its y axis and incline by 30deg

  p.y+=.05;

  float r = .2, // radius of the lollipop
        stick1 = smax(length(p.xz) - r/3., max(p.y, abs(-p.y) - 1.4), .1);	

  p.y-=.3;

  p.xz*=rot(p.y*5.); // setting up the helical twist

  float wall1 = p.x, wall2 = -wall1, wall3 = p.z, wall4 = -wall3, // creating four vertical walls

        result = max(max(wall1,wall2), max(wall3,wall4)); // forming an endless vertical cuboid

  //assigning colors to each wall

  if (result == wall1) { partID = 1; } // green
  else if (result == wall2) { partID = 2; } // red
  else if (result == wall3) { partID = 3; } // yellow
  else if (result == wall4) { partID = 4; } // blue
  else { partID = 5; }

  float cyl = length(p.xz) - r; // a cylinder that wraps around the cuboid;

  result = smax(mix(result,cyl,1.5)/sqrt(2.),abs(p.y) - 1., .1); // forming the helical swirly by mixing the cuboid and cylinder, and instead of getting the medium between the two, pushing the cylindrical roundness even further'
  result = min(result, stick1); // adding the stick to the lolly

  if (result == stick1) { partID = 5; } // applying color only after new object has been added to result

  // round ball lollipop

  p = p0; // resetting the base

  pos = PI*2./3.; // setting the object to a new position, a third of the circle away from the first
  orbit; // pushing it along the orbit

  p.y-=.66 - .25*cos(iTime*3.);

  float stick2 = length(p.xz) - .0333; // starting with a cylinder
  stick2 = max(stick2, max(p.y,-p.y - 1.5)); // one end starts at the center of the lollipop, the other sticks out from the bottom
  result = min(result, stick2); // adding stick to scene

  float ball = length(p) - .25;
  result = min(result, ball); // sticking the ball onto the stick

  p = p0; // reset to base
  p-=.66;

  if (result == ball) { // coloring for the ball, consisting of four colored horizontal stripes that don't follow the ball, but are instead tied to the scene's coordinates, so as it bobs up and down, the pattern changes
    for (int b=1;b<5;b++) { // four colors will be set
      float floatB = float(b); // converting the variable into a float
      for (float d=0.;d<2.;d++) { // two se.........完整代码请登录后点击上方下载按钮下载查看