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 },
  .........完整代码请登录后点击上方下载按钮下载查看