p5打造一个三维山脉地形图效果代码

代码语言:html

所属分类:三维

代码描述:p5打造一个三维山脉地形图效果代码

代码标签: 三维 山脉 地形图 效果

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
* { margin:0; padding:0; } 
html, body { width:100%; height:100%; overflow: hidden; background:black;} 
canvas { display:block; }
#controls {
  z-index: 2;
  margin: 20px;
  position: absolute;
  top: 0; left: 0;
  color: white;
}
</style>



</head>

<body translate="no" >
  <div id="controls"></div>
 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script>
  
      <script>
class Vec3{
  constructor(x, y, z, r=10){
    this.x = x;
    this.y = y;
    this.z = z;
    this.r = r;
  }
  op(p, f){
    this.x = f(this.x, p.x != undefined ? p.x : p);
    this.y = f(this.y, p.y != undefined ? p.y : p);
    this.z = f(this.z, p.z != undefined ? p.z : p);
    return this;
  }
  normalize(){
    let d = sqrt(this.x*this.x + this.y*this.y + this.z*this.z);
    return this.div(d);
  }
  dot   (p){return this.x*p.x + this.y*p.y + this.z*p.z}
  plus  (p){return this.op(p, (a, b) => a + b)}
  minus (p){return this.op(p, (a, b) => a - b)}
  times (p){return this.op(p, (a, b) => a * b)}
  div   (p){return this.op(p, (a, b) => a / b)}
  distTo(p){retu.........完整代码请登录后点击上方下载按钮下载查看

网友评论0