webgl canvas实现三维城市效果代码-html代码-BFW代码库

webgl canvas实现三维城市效果代码

代码语言：html

所属分类：三维

代码描述：webgl canvas实现三维城市效果代码

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

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

<head>

  <meta charset="UTF-8">

  
<style>
html, body {
	overflow: hidden;
	touch-action: none;
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
canvas {
	position: absolute;
	width: 100%; 
	height: 100%;
	user-select: none;
	background: #000;
	cursor: pointer;
}
</style>



</head>

<body >
  <canvas></canvas>

  <script>
      
  </script>
      <script type="module">
import {
WebGL,
Mesh,
Shader,
FrameBuffer } from
"//repo.bfw.wiki/bfwrepo/js/webgl-helpers.js";

{
  const [canvas, gl] = WebGL("canvas");
  gl.enable(gl.DEPTH_TEST);
  gl.enable(gl.CULL_FACE);
  console.clear();
  const matrices = [];
  const shapes = [];
  const stack = [];
  const rule = {};
  let ry = 0;
  let ex = 0;
  let ey = 0;
  let ez = 0;
  let nVertices = 0;
  let mustResize = true;
  let renderingTexture = null;
  let camDist = 0;
  let lightPosition = null;
  let ambientColor = null;
  let specularColor = null;
  let diffuseColor = null;
  let fog = null;
  let fogColor = null;
  let fov = 60;
  let pitch = 30;
  let background = null;
  let startRule = "start";
  let transformScene = null;
  let seed = Math.round(Date.now() / 86400000) - 18000;
  let minSize = 0;
  let maxDepth = 10000000;
  let minComplexity = 0;
  let maxPitch = 0;
  let cables = false;
  let zoomAcceleration = 0.0025;
  let speedRotation = 0.08;

  const transforms = {
    x(m, v) {
      m[12] += m[0] * v;
      m[13] += m[1] * v;
      m[14] += m[2] * v;
      m[15] += m[3] * v;
    },
    y(m, v) {
      m[12] += m[4] * v;
      m[13] += m[5] * v;
      m[14] += m[6] * v;
      m[15] += m[7] * v;
    },
    z(m, v) {
      m[12] += m[8] * v;
      m[13] += m[9] * v;
      m[14] += m[10] * v;
      m[15] += m[11] * v;
    },
    s(m, v) {
      const a = Array.isArray(v);
      const x = a ? v[0] : v;
      const y = a ? v[1] : x;
      const z = a ? v[2] : x;
      m[0] *= x;
      m[1] *= x;
      m[2] *= x;
      m[3] *= x;
      m[4] *= y;
      m[5] *= y;
      m[6] *= y;
      m[7] *= y;
      m[8] *= z;
      m[9] *= z;
      m[10] *= z;
      m[11] *= z;
    },
    rx(m, v) {
      const rad = Math.PI * (v / 180);
      const s = Math.sin(rad);
      const c = Math.cos(rad);
      const a10 = m[4];
      const a11 = m[5];
      const a12 = m[6];
      const a13 = m[7];
      const a20 = m[8];
      const a21 = m[9];
      const a22 = m[10];
      const a23 = m[11];
      m[4] = a10 * c + a20 * s;
      m[5] = a11 * c + a21 * s;
      m[6] = a12 * c + a22 * s;
      m[7] = a13 * c + a23 * s;
      m[8] = a10 * -s + a20 * c;
      m[9] = a11 * -s + a21 * c;
      m[10] = a12 * -s + a22 * c;
      m[11] = a13 * -s + a23 * c;
    },
    ry(m, v) {
      const rad = Math.PI * (v / 180);
      const s = Math.sin(rad);
      const c = Math.cos(rad);
      const a00 = m[0];
      const a01 = m[1];
      const a02 = m[2];
      const a03 = m[3];
      const a20 = m[8];
      const a21 = m[9];
      const a22 = m[10];
      const a23 = m[11];
      m[0] = a00 * c + a20 * -s;
      m[1] = a01 * c + a21 * -s;
      m[2] = .........完整代码请登录后点击上方下载按钮下载查看