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.fillSt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0