p5.easycam实现三维多个地球绕月球转动画效果代码-html代码-BFW代码库

p5.easycam实现三维多个地球绕月球转动画效果代码

代码语言：html

所属分类：三维

代码描述：p5.easycam实现三维多个地球绕月球转动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
	height:100%;
	width:100%;
}
</style>


×

</head>

<body >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.easycam.min.js"></script>
      <script  >


class Planet {
  constructor(r, d, o, texxture=planetImg) {
    this.v = p5.Vector.random3D();

    this.radius = r;
    this.distance = d;
    this.v.mult(this.distance);
    this.angle = random(TWO_PI);
    this.orbitspeed = o;

    this.texture = texxture;
    this.texturePl = planetImg2;
    this.textureMoon = moon;
    this.planets = null;
  }

  orbit() {
    this.angle = this.angle + this.orbitspeed;
    if (this.planets != null) {
      for (let i = 0; i < this.planets.length; i++) {
        this.planets[i].orbit();
      }
    }
  }

  spawnMoons(total, level, txtr=this.texturePl) {
    this.planets = [];
    for (let i = 0; i < total; i++) {
      let r = this.radius / (level * 4);
      let d = random(this.radius + r, (this.radius + r) * 2);
      let o = random(-0.1, 0.1);
      
      this.planets[i] = new Planet(r, d, o, txtr);
      
      if (level < 2) {
        //initialMoons
        let num = int(random(0, 3));
        this.planets[i].spawnMoons(num, level + 1, this.textureMoon);
      }
    }
  }

  show() {
    push();
    noStroke();
    let v2 = createVector(1, 0, 1);
    let p = this.v.cross(v2);
    // Rotation around a 0-length axis doesn't work in p5.js, so don't do that.
    if (p.x != 0 || p.y != 0 || p.z != 0) {
      rotate(this.angle, p);
    }
    stroke(255);
    // line(0, 0, 0, this.v.x, this.v.y, this.v.z);
    // line(0, 0, 0, p.x, p.y, p.z);

    translate(this.v.x, this.v.y, this.v.z);
    noStroke();
    texture(this.texture);
    // fill(255, 255, 0);
    sphere(this.radius);
    // ellipse(0, 0, this.radius * 2, this.radius * 2);
    if (this.planets != null) {
      for (let i = 0; i < this.planets.length; i++) {
        this.planets[i].show(this.texture);
      }
    }
    pop();
  }
}


let sun;
let cam;
let moon;
let sunImg;
let planetImg;
let planetImg2;

function setup() {
  moon = loadImage("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cfilter id='moon'%3E%3CfeTurbulence baseFrequency='0.3' numOctaves='2' seed='1'%3E%3C/feTurbulence%3E%3CfeColorMatrix values='0.2 1.8 2.9 -4.7 2.9 -0.5 4.9 0 -0.1 -4.7 2.6 4.8 4.2 4.5 -1.5 2.7 1.4 2 4 -4.1'%3E%3C/feColorMatrix%3E%3CfeDiffuseLighting lighting-color='rgb(197,195,198)' surfaceScale='2'%3E%3CfeDistantLight azimuth='95' elevation='92'%3E%3C/feDistantLight%3E%3C/feDiffuseLighting%3E%3C/fi.........完整代码请登录后点击上方下载按钮下载查看