three打造3d三位灯笼

代码语言:html

所属分类:三维

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: rgb(238,238,238);
  background: radial-gradient(circle, rgba(238,238,238,1) 0%, rgba(199,166,152,1) 53%, rgba(201,87,87,1) 100%);
  cursor: pointer;
}
</style>

</head>
<body translate="no">



<script type="x-shader/x-vertex" id="vs-lines">

uniform float globalTime;
uniform vec3 gravity;
uniform vec3 gravity2;
uniform float spacing;

attribute vec3 customColor;
attribute float seed;
attribute float seed2;
attribute float draw;
attribute float index2;
attribute vec3 norm;

varying vec3 vColor;
varying float vDraw;
varying vec3 vNormal;

void main() {

vDraw = draw;
vColor = customColor;

vec3 displacement = vec3(0.0,0.0,0.0);
vec3 forceDirection = vec3(0.0,0.0,0.0);

float displacementFactor = pow(index2, 1.5);
float displacementFactor2 = pow(index2, 3.5);
float displacementFactor3 = pow(1.0-index2, 1.0);
  
// "gravity"
vec3 g = gravity;
g.x *= displacementFactor2 * seed2;

// "wind"
forceDirection.x = sin(globalTime*0.01+seed2*0.75+index2*0.5) * 0.1*displacementFactor;
forceDirection.y = cos(globalTime*0.1+seed2*1.0+index2*1.0) * 0.1*displacementFactor;
forceDirection.z = sin(globalTime*0.1+seed2*0.5+index2*1.0) * 0.1*displacementFactor;

displacement = g + forceDirection + ((1.0-index2)*gravity2) * seed;

vec3 aNormal = norm;
aNormal.xyz += displacement*displacementFactor;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0