three实现三维纸张撕裂上下起伏波动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维纸张撕裂上下起伏波动动画效果代码

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

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

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


<script type="importmap">
  {
    "imports": {      
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/157/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/157/jsm/"
    }
  }
</script>
  
  
<style>
body{
  overflow: hidden;
  margin: 0;
}
</style>


  
  
</head>

<body >
  <script>
  let noise = `//	Simplex 3D Noise 
//	by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}

float snoise(vec3 v){ 
  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;

  const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

// First corner
  vec3 i  = floor(v + dot(v, C.yyy) );
  vec3 x0 =   v - i + dot(i, C.xxx) ;

// Other corners
  vec3 g = step(x0.yzx, x0.xyz);
  vec3 l = 1.0 - g;
  vec3 i1 = min( g.xyz, l.zxy );
  vec3 i2 = max( g.xyz, l.zxy );

  //  x0 = x0 - 0. + 0.0 * C 
  vec3 x1 = x0 - i1 + 1.0 * C.xxx;
  vec3 x2 = x0 - i2 + 2.0 * C.xxx;
  vec3 x3 = x0 - 1. + 3.0 * C.xxx;

// Permutations
  i = mod(i, 289.0 ); 
  vec4 p = permute( permute( permute( 
             i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
           + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
           + i.x + vec4(0.0, i1.x, i2.x, 1.0 ));

// Gradients
// ( N*N points uniformly over a square, mapped onto an octahedron.)
  float n_ = 1.0/7.0; // N=7
  vec3  ns = n_ * D.wyz - D.xzx;

  vec4 j = p - 49.0 * floor(p * ns.z *ns.z);  //  mod(p,N*N)

  vec4 x_ = floor(j * ns.z);
  vec4 y_ = floor(j - 7.0 * x_ );    // mod(j,N)

  vec4 x = x_ *ns.x + ns.yyyy;
  vec4 y = y_ *ns.x + ns.yyyy;
  vec4 h = 1.0 - abs(x) - abs(y);

  vec4 b0 = vec4( x.xy, y.xy );
  vec4 b1 = vec4( x.zw, y.zw );

  vec4 s0 = floor(b0)*2.0 + 1.0;
  vec4 s1 = floor(b1)*2.0 + 1.0;
  vec4 sh = -step(h, vec4(0.0));

  vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
  vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;

  vec3 p0 = vec3(a0.xy,h.x);
  vec3 p1 = vec3(a0.zw,h.y);
  vec3 p2 = vec3(a1.xy,h.z);
  vec3 p3 = vec3(a1.zw,h.w);

//Normalise gradients
  vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
  p0 *= norm.x;
  p1 *= norm.y;
  p2 *= norm.z;
  p3 *= norm.w;

// Mix final noise value
  vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
  m = m * m;
  return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1), 
                                dot(p2,x2), dot(p3,x3) ) );
}`;
</script>
  
      <script  type="module">
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

console.clear();

// load fonts
await (async function () {
  async function loadFont(fontface) {
    await fontface.load();
    document.fonts.add(fontface);
  }
  let fonts = [
    new FontFace(
      "Neonderthaw",
      "url(https://fonts.gstatic.com/s/neonderthaw/v6/Iure6Yx5-oWVZI0r-17AeaZOrLQ.woff2)"
    ),
    new FontFace(
      "TiltNeon",
      "url(https://fonts.gstatic.com/s/tiltneon/v10/E21L_d7gguXdwD9LEFY2WCeElCNtd-eBqpHp1TzrkJSmwpj5ndxquUK6UOc.woff2)"
    ),
    new FontFace(
      "Michroma",
      "url(https://fonts.gstatic.com/s/michroma/v19/PN_zRfy9qWD8fEagAPg9pTk.woff2)"
    )
  ];
  for (let font in fonts) {
    //console.log(fonts[font]);
    await loadFont(fonts[font]);
  }
})();

class FloorBase extends THREE.Mesh {
  constructor() {    
    let hfs = 50; // half floor size
    let hhs = 5; // half hole size;
    let floorShape = new THREE.Shape(
      [
        [hfs, hfs],
        [hfs, -hfs],
        [-hfs, -hfs],
        [-hfs, hfs]
      ].map((p) => {
        return new THREE.Vector2(p[0], p[1]);
      })
    );
    let floorHole = new THREE.Path()
      .moveTo(hhs, hhs)
      .lineTo(hhs, -hhs)
      .lineTo(-hhs, -hhs)
      .lineTo(-hhs, hhs)
      .lineTo(hhs, hhs);
    floorShape.holes.push(floorHole);
    super();
    this.camPosition = {value: new THREE.Vector3()};
    this.geometry = new THREE.ShapeGeometry(floorShape).rotateX(Math.PI * -0.5);
    this.material = new THREE.MeshStandardMaterial({
      onBeforeCompile: shader => {
        shader.uniforms.camPosition = this.camPosition;
        shader.uniforms.textTexture = {value: getTexture()};
        shader.vertexShader = `
          uniform vec3 camPosition;
          varying vec3 vPos;
          mat2 rot2d(float a){return mat2(cos(a), sin(a), -sin(a), cos(a));}
          ${shader.vertexShader}
        `.replace(
          `#include <begin_vertex>`,
          `#include <begin_vertex>
            float a = atan(camPosition.z, camPosition.x) - PI * 0.375;
            float hPI = PI * 0.5;
            a = floor(a / hPI) * hPI; 
            vPos = position;
            vPos.xz *= rot2d(a);
          `
        );
        //console.log(shader.vertexShader);
        shader.fragmentShader = `
          uniform sampler2D textTexture;
          varying vec3 vPos;
          ${shader.fragmentShader}
        `.replace(
          `#include <map_fragment>`,
          `
            float patchW = 7.;
            float patchH = patchW / 8.;
            vec2 patchC = vec2(-1.5, 5. + patchH * 0.5);
            vec2 uv = (vPos.xz - (patchC + vec2(-patchW, -patchH) * 0.5)) / vec2(patchW, patchH);
            uv.y = 1. - uv.y;
            
            vec4 sampledDiffuseColor = texture2D( textTexture, uv );
            diffuseColor *= sampledDiffuseColor;
          
          `
        );
        //console.log(shader.fragmentShader);
      }
 .........完整代码请登录后点击上方下载按钮下载查看