three+webgl实现三维立体网格布料上下波动动画效果代码-html代码-BFW代码库

three+webgl实现三维立体网格布料上下波动动画效果代码

代码语言：html

所属分类：三维

代码描述：three+webgl实现三维立体网格布料上下波动动画效果代码

下面为部分代码预览，完整代码请点击下载或在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/164/three.module.js",
                "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/",
                "OrbitControls": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/controls/OrbitControls.js",
"EffectComposer":"//repo.bfw.wiki/bfwrepo/js/module/three/examples/164/jsm/postprocessing/EffectComposer.js"
                }
  }
 </script>
  
  
  
<style>
*{
padding:0;
margin:0;
}
canvas{
  display:block;
}
</style>


  
</head>

<body>
  <script type="x-shader/x-vertex" id="vertexshader">
  // attribute float aOrder;
  uniform float uTime;
  varying vec2 vUv;
  varying float vOrder;
  
  
  #define PI 3.14159265359

  void main() {
    
    vec4 modelPosition = modelMatrix * vec4(position, 1.0);

    vec2 dist = vec2(modelPosition.x,modelPosition.z);
    float radius = sin(uTime*.5);
    float elevation = 0.7 * sin(-PI * length(dist) * 3. + uTime * 2.7);

    modelPosition.y += elevation*.1;   
    
    vec4 viewPosition = viewMatrix * modelPosition;
    

    gl_Position = projectionMatrix * viewPosition;

   vUv = uv;


  }
</script>
<script type="x-shader/x-fragment" id="fragment-dot">

 varying vec2 vUv;

 void main() {
   float strength =  1.- step(.5,(step(.15, mod(vUv.y * 15.15,1.)) + step(.15, mod(vUv.x * 15.15,1.))));
   vec3 color = vec3(0.2, 0.5, 1.0);
   gl_FragColor = vec4(strength * color, strength);

 }
</script>
<script type="x-shader/x-fragment" id="fragment-line">

  varying vec2 vUv;
  uniform vec3 uColor;

 void main() {
   float strength = 1.-step(.1, mod(vUv.y * 15.1,1.));
   // vec3 color = vec3(0.97, 0.00, 1.00);
   vec3 color = uColor;
   gl_FragColor = vec4(strength * color, strength);

 }
</script>
<script type="x-shader/x-fragment" id="fragment-grid">

  varying vec2 vUv;

 void main() {
   float strength = 1. - step(.1, mod(vUv.y * 15.1,1.)) * step(.1, mod(vUv.x * 15.1,1.));
   vec3 color = vec3(0.3, 0.8, 1.00);
   gl_FragColor = vec4(strength * color,strength);

 }
</script>

  
      <script type="module">
import * as THREE from "three";
import { OrbitControls } from 'OrbitControls';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';

/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight };

let renderer = new THREE.WebGLRenderer();

document.body.appendChild(renderer.domElement);
renderer.setSize(sizes.width, sizes.height);
/**
 * Base
 */



// Scene
const scene = new THREE.Scene();
// scene.background = new THREE.Color("red");

/**
 * Test mesh
 */
// Geometry
const geometry = new THREE.PlaneGeometry(1, 1, 15, 15);
geometry.rotateX(Math.PI / 2);
const edges = new THREE.EdgesGeometry(geometry);

// Shaders
const vertexShader = document.querySelector('#vertexshader').textContent;
const lineShader = document.querySelector('#fragment-line').textContent;
const dotShader = document.querySelect.........完整代码请登录后点击上方下载按钮下载查看