three+webgl实现柔美丝带飘动动画效果代码-html代码-BFW代码库

three+webgl实现柔美丝带飘动动画效果代码

代码语言：html

所属分类：动画

代码描述：three+webgl实现柔美丝带飘动动画效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
body {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  margin: 0;  overflow: hidden;}#container {  position: absolute;  width: 100vmax;  height: 100vmax;  left: 50%;  top: 50%;  background: linear-gradient(to bottom, #000, #111);  transform: translate3d(-50%, -40%, 0);}canvas {  display: block;}
  </style>
</head>

<body>
    <div id="container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.109.js"></script>
    <script >
      
let scene, camera, renderer, ribbon

const container = document.querySelector('#container')

const init = () => {

  scene = new THREE.Scene()
  camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 10000 )
  camera.position.z = 2

  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
  container.appendChild( renderer.domElement )

  ribbon = new THREE.Mesh(
    new THREE.PlaneGeometry( 1, 1, 128, 128 ),
    new THREE.ShaderMaterial({
      uniforms: {
        time: { value: 1.0 },
      },
      vertexShader: `
        varying vec3 vEC;
        uniform float time;

        float iqhash(float n) {
          return fract(sin(n) * 43758.5453);
        }

        float noise(vec3 x) {
          vec3 p = floor(x);
          vec3 f = fract(x);
          f = f * f * (3.0 - 2.0 * f);
          float n = p.x + p.y * 57.0 + 113.0 * p.z;
          return mix(mix(mix(iqhash(n), iqhash(n + 1.0), f.x),
                     mix(iqhash(n + 57.0), iqhash(n + 58.0), f.x), f.y),
                     mix(mix(iqhash(n + 113.0), iqhash(n + 114.0), f.x),
                     mix(iqhash(n + 170.0), iqhash(n + 171.0), f.x), f.y), f.z);
        }.........完整代码请登录后点击上方下载按钮下载查看