p5实现三维人手模型旋转展开动画效果代码-html代码-BFW代码库

p5实现三维人手模型旋转展开动画效果代码

代码语言：html

所属分类：三维

代码描述：p5实现三维人手模型旋转展开动画效果代码

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

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

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

<style>
    html, body {
  background: black;
  margin: 0;
  overflow: hidden;
}
</style>
</head>

<body>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.js"></script>
    <script 
    >
        
        let canvas, ctx;

let thickness = 60;
let handWidth = 300;
let handHeight = 250;
let fingerCount = 4;
let fingerWidth = handWidth / fingerCount;
let fingerHeight = [150, 125, 100];

function setup() {
  canvas = createCanvas(windowWidth, windowHeight, WEBGL);
  ctx = canvas.drawingContext;
  ortho();
}

function draw() {
  background(0);

  specularMaterial(200, 200, 200);
  ambientLight(16, 64, 128);
  directionalLight(64, 64, 64, 0.2, 0.5, 1);
  pointLight(64, 96, 128, 0, 25, -300);

  translate(0, (handHeight + fingerHeight.reduce((p, n) => p + n)) / 4, 0);
  rotateY(frameCount / 50);
  rotateX(-PI / 16);

  push();
  translate(0, handHeight * 2.5, thickness / 2);
  box(handWidth / 4 * 3, handHeight * 4, thickness);
  pop();

  rotateX(-PI / 16);

  box(handWidth, handHeight, thicknes.........完整代码请登录后点击上方下载按钮下载查看