threejs实现三维洞穴坍塌动画效果代码-html代码-BFW代码库

threejs实现三维洞穴坍塌动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs实现三维洞穴坍塌动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
body { 
    margin: 0; 
    overflow:hidden
}
</style>



</head>

<body >
  <script type="module">
    import {
        Scene,
        WebGLRenderer,
        PerspectiveCamera,
        Object3D,
        BoxBufferGeometry,
        BufferAttribute,
        MeshBasicMaterial,
        InstancedMesh,
        InstancedBufferAttribute,
        CanvasTexture
    } from 'https://unpkg.com/three@0.121.1/build/three.module.js';

    const rowCount = 20;
    const columnCount = 64;
    const layerCount = 2;
       
    const camera = new PerspectiveCamera( 60, innerWidth / innerHeight, 1, 1000 );
    camera.position.set( 0, 6, 6 );
    camera.lookAt( 0, 0, 1 );

    const scene = new Scene();

    const geom = new BoxBufferGeometry();
    const rowCol = [];

    for ( let i = 0; i < rowCount; i ++ ) {
        for ( let j = 0; j < layerCount; j ++ ) {
            for ( let k = 0; k < columnCount; k ++ ) {
                rowCol.push( i );
                rowCol.push( k );
                rowCol.push( j );
            }
        }
    }

    geom.setAttribute( 'rcl', new InstancedBufferAttribute( new Float32Array( rowCol ), 3 ) );

    const canvas = document.createElement('canvas');
    
    const size = canvas.height = canvas.width = 128;
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, size, size);
    ctx.clearRect(3, 3, size-6, size-6);
    
    const map = new CanvasTexture(canvas);
    map.anisotropy = 4;
    const material = new MeshBasicMaterial({map});

    const time = {value: 0};
    
    material.onBeforeCompile = (shader) => {
        
        shader.uniforms.time = time;
        
        shader.vertexShader = shader.vertexShader
            .split('#include <common>').join(`

    uniform float time;
    attribute vec3 rcl;
    #include <common>
    varying vec3 col;
            `)
            .split('#include <project_vertex>').join(`
   
    const float columnCount = float(${columnCount});
    const float arc = 2.0 * 3.14159265359 / colum.........完整代码请登录后点击上方下载按钮下载查看