webgl实现立体3d三维口红旋转质感反射动画效果代码-html代码-BFW代码库

webgl实现立体3d三维口红旋转质感反射动画效果代码

代码语言：html

所属分类：三维

代码描述：webgl实现立体3d三维口红旋转质感反射动画效果代码

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

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

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

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
body{
  overflow: hidden;
  margin: 0;
}

.container{
  display: none;
  position: absolute;
  bottom: 5vh;
  left: 50%;
  transform: translate(-50%, 0);
  height: 17vh;
  aspect-ratio: 3;
  background: rgba(0, 0, 0, 0.5);
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  padding: 5vh 10vh;
  color: white;
  
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 3.5vh;
}

.btnClose{
  position: absolute;
  width: 5vh;
  height: 5vh;
  top: 0.5vh;
  right: 3vh;
  border: 0.25vh solid white;
  border-radius: 1vh;
  background: transparent;
  color: white;
  padding: 0;
  
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 4vh;
}
</style>

  
</head>

<body translate="no">
  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.180.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.180.0/examples/jsm/"
    }
  }
</script>
<script>
  const noise = `//	Simplex 4D Noise 
//	by Ian McEwan, Stefan Gustavson (https://github.com/stegu/webgl-noise)
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
float permute(float x){return floor(mod(((x*34.0)+1.0)*x, 289.0));}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
float taylorInvSqrt(float r){return 1.79284291400159 - 0.85373472095314 * r;}

vec4 grad4(float j, vec4 ip){
  const vec4 ones = vec4(1.0, 1.0, 1.0, -1.0);
  vec4 p,s;

  p.xyz = floor( fract (vec3(j) * ip.xyz) * 7.........完整代码请登录后点击上方下载按钮下载查看