互动应用开发p5.js——WebGL太阳系

最新推荐文章于 2022-04-16 12:39:32 发布

平杨猪

最新推荐文章于 2022-04-16 12:39:32 发布

阅读量1.3k

点赞数 5

分类专栏：互动应用开发p5.js 文章标签： javascript 前端交互 web html

本文链接：https://blog.csdn.net/weixin_48388330/article/details/122607143

版权

互动应用开发p5.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

WebGL太阳系

一、实验内容：

完成一个太阳系场景，其中至少有三个球体，一个表示太阳，一个表示地球，一个表示月亮；地球不停地绕太阳旋转，月亮绕地球旋转，星球本身有自转。可添加纹理，纹理自行从网络搜寻。画上星球运动的轨道线，并加上适当的光照效果。提交代码（如有纹理则需要提交纹理图片）和文档，要求简要说明功能点和实现方法；

评分标准：

星球的自转和公转运动准确；（30分）
光照效果合理；（30分）
场景丰富美观，可自由增加其他物体和光照，如飞船等；（20分）
编码规范，文档说明准确清楚；（20分）

二、实验说明：

所有实验是通过 Visual Studio Code引入p5.js包编写，所以首先要去p5.js官网下载相关包，或是在联网状态下把html中引入包的代码改成例如<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>等。

三、实验代码：

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

<head>
  <meta charset="utf-8">
  <title>sun</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.js"></script>
  
</head>

<body>
  <script src="sketch.js"></script>
</body>

</html>

let x0 = 0, y0 = 0, z0 = 0,//初始化太阳坐标
  x1 = 0, y1 = 0, z1 = 0,//初始化地球坐标
  x2 = 0, y2 = 0, z2 = 0;//初始化月球坐标
let revolutionAngle = 20; // 公转角度
let rotationAngle = 0; // 自转角度
let revolutionRadius = 300; //公转半径
let sun, earth, moon; //加载贴图
let stars = []; // 繁星
let camX, camY, camZ = 700; // 视口照相机位置

function preload() {
  sun = loadImage("picture/sun.png");
  earth = loadImage("picture/earth.png");
  moon = loadImage("picture/moon.png");
  sound = loadSound("sound/sound.mp3");
}

function setup() {
  let cnv = createCanvas(windowWidth, windowHeight, WEBGL);
  cnv.mousePressed(canvasPressed);//点击鼠标事件播放声音
  //创造繁星
  for (let i = 0; i < 300; i++) {
    stars.push({
      x: 0,
      y: 0,
      offset: Math.random() * 360,
      orbit: (Math.random() + 0.01) * max(width, height),
      radius: Math.random() * 2,
      vx: Math.floor(Math.random() * 10) - 5,
      vy: Math.floor(Math.random() * 10) - 5,
    });
  }
}

function draw() {
  clear();
  background(0);
  setLight();
  drawSun();
  drawEarth();
  drawMoon();
  drawStars();
  // 照相机位置
  camX = (mouseX - width / 2) / 10;
  camY = (mouseY - height / 2) / 10;
  camera(camX, camY-300 , camZ+1000, 0, 0, 0, 0, 1, 0);
  noStroke();
  rotationAngle += 0.01;
}

function drawSun() {
  push();
  translate(x0, x0, z0);
  fill(0, 255, 255);
  texture(sun);
  pointLight(255, 255, 255, 0, 0, 100000);
  rotateY(rotationAngle / 5);
  sphere(200);
  pop();
  // 地球轨道
  push();
  translate(x0, y0, z0);
  rotateX((PI / 180) * 90);
  fill(240);
  torus(800, 0.7, 240);
  pop();
}

function drawEarth() {
  x1 = x0 + 800 * cos(revolutionAngle);
  z1 = z0 + 800 * sin(revolutionAngle);
  push();
  translate(x1, y1, z1);
  rotateY(rotationAngle);
  texture(earth);
  sphere(40);
  pop();
  // 月球轨道
  push();
  translate(x1, y1, z1);
  rotateX((PI / 180) * 90);
  fill(240);
  torus(60, 0.7, 240);
  pop();
  revolutionAngle += 0.005;
}

function drawMoon() {
  x2 = x1 + 60 * cos(revolutionAngle * 5);
  z2 = z1 + 60 * sin(revolutionAngle * 5);
  push();
  translate(x2, y2, z2);
  rotateY(-rotationAngle);
  texture(moon);
  sphere(10);
  pop();
}

function drawStars() {
  colorMode(RGB, 255, 255, 255, 1);
  for (let i = 0; i < stars.length; i++) {
    let s = stars[i];
    push();
    translate(s.x - width / 2, s.y - height / 3, -1000);
    sphere(5);
    pop();
  }
  update();
}

function update() {
  let originX = width / 2;
  let originY = height / 2;
  for (let i = 0; i < stars.length; i++) {
    let s = stars[i];
    let rad = (frameCount * (1 / (s.orbit * 2 + s.offset)) + s.offset) % TAU;
    s.x = originX + cos(rad) * (s.orbit * 2);
    s.y = originY + sin(rad) * s.orbit;
  }
}

function setLight() {
  pointLight(255,255,255,0,0,0,500);
  // let dirX = -(mouseX - width / 2);
  // let dirY = -(mouseY - height / 2);
  ambientLight(0);
  //directionalLight(255, 255, 255, dirX, dirY, -250);
}

function mouseWheel(event) {
  if (event.deltaY > 0) {
    camZ += 10; 
  } else {
    camZ -= 10;
  }
}

function canvasPressed() {
  if (sound.isPlaying()) {
    sound.pause();
  } else {
    sound.play();
  }
}

四、实验结果：

注：需要预加载4个文件，这里需要自行去找3张图片贴图以及音乐

平杨猪

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
1
评论
互动应用开发p5.js——WebGL太阳系

WebGL太阳系一、实验内容：完成一个太阳系场景，其中至少有三个球体，一个表示太阳，一个表示地球，一个表示月亮；地球不停地绕太阳旋转，月亮绕地球旋转，星球本身有自转。可添加纹理，纹理自行从网络搜寻。画上星球运动的轨道线，并加上适当的光照效果。提交代码（如有纹理则需要提交纹理图片）和文档，要求简要说明功能点和实现方法；评分标准：星球的自转和公转运动准确；（30分）光照效果合理；（30分）场景丰富美观，可自由增加其他物体和光照，如飞船等；（20分）编码规范，文档说明准确清楚；（20分）
复制链接

扫一扫