three打造一个方块落入黑洞塌方效果代码-html代码-BFW代码库

three打造一个方块落入黑洞塌方效果代码

代码语言：html

所属分类：三维

代码描述：three打造一个方块落入黑洞塌方效果代码

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

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

<head>

  <meta charset="UTF-8">

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


</head>

<body translate="no" >
  <script type="module">

    import {
        Scene,
        WebGLRenderer,
        PerspectiveCamera,
        Object3D,
        BufferGeometry,
        BoxBufferGeometry,
        BufferAttribute,
        MeshBasicMaterial,
        InstancedMesh,
        InstancedBufferAttribute,
        DynamicDrawUsage,
        CanvasTexture
    } from 'https://unpkg.com/three@0.121.1/build/three.module.js';

    const rowCount = 36;
    const columnCount = 30;
    const layerCount = 3;
    
    const dummy = new Object3D();
    
    const camera = new PerspectiveCamera( 60, innerWidth / innerHeight, 1, 1000 );
    camera.position.set( 6, 7 );
    camera.lookAt( 0.3, 0, 0 );

    var scene = new Scene();

    var geom = new BoxBufferGeometry();

    geom.computeVertexNormals();
    
    const canvas = document.createElement('canvas');
    
    const size = canvas.height = canvas.width = 32;
    let ctx = canvas.getContext('2d');
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, size, size);
    ctx.clearRect(1, 1, size-2, size-2);
    const map = new CanvasTexture(canvas);
    map.anisotropy = 4;
    var material = new MeshBasicMaterial({map});

   
    const mesh = new InstancedMesh( geom, material, rowCount*columnCount*layerCount );
    mesh.instanceMatrix.setUsage( DynamicDrawUsage ); 
    scene.add( mesh );

    var renderer = new WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( devicePixelRatio );
.........完整代码请登录后点击上方下载按钮下载查看