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

野性酷女 2023-10-01 15:49 19阅读 0赞

## WebGL太阳系 ##

### 一、实验内容： ###

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

评分标准：

1.  星球的自转和公转运动准确；（30分）
2.  光照效果合理；（30分）
3.  场景丰富美观，可自由增加其他物体和光照，如飞船等；（20分）
4.  编码规范，文档说明准确清楚；（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();
      }
    }

### 四、实验结果： ###

![d0808554518b4e40837fe1b9bd6f56db.png][]

![fc0b8e0814a84b19bc5164b9f903a890.png][]

![e249339e93dc44d98b903b71a21019bb.png][]

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

[d0808554518b4e40837fe1b9bd6f56db.png]: https://img-blog.csdnimg.cn/d0808554518b4e40837fe1b9bd6f56db.png
[fc0b8e0814a84b19bc5164b9f903a890.png]: https://img-blog.csdnimg.cn/fc0b8e0814a84b19bc5164b9f903a890.png
[e249339e93dc44d98b903b71a21019bb.png]: https://img-blog.csdnimg.cn/e249339e93dc44d98b903b71a21019bb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，19人围观）

还没有评论，来说两句吧...

相关阅读

相关索尼 toio™ 应用创意开发征文｜toio™儿童互动企鹅小游戏

前言索尼推出的 toio™ 是一款创新的游戏玩具，结合了物理和数字元素，通过编程和物理互动，可以提供丰富多样的游戏和应用体验，激发用户的创造力和想象力。无论是儿童还是成

小灰灰/ 2023年10月15日 18:18/ 0 赞/ 68 阅读

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

WebGL太阳系一、实验内容：完成一个太阳系场景，其中至少有三个球体，一个表示太阳，一个表示地球，一个表示月亮；地球不停地绕太阳旋转，月亮绕地球旋转，星球本身有

野性酷女/ 2023年10月01日 15:49/ 0 赞/ 20 阅读

相关互动应用开发p5.js——网页小游戏——贪吃蛇

贪吃蛇一、实验内容：基于课件改进贪吃蛇或者太空大战的小游戏，可以加入新的视觉效果，比如区分蛇头和蛇身；为食物增加特效；分数排行榜；行进改成可以循环等等；尽可

r囧r小猫/ 2023年10月01日 15:49/ 0 赞/ 33 阅读

相关互动应用开发p5.js——音视频交互

音视频交互一、实验内容：音频可视化，是指一种以视觉为核心，以音频为载体，以大众为诉求对象，借助多种新媒体技术等传播媒介，通过画面、影像来诠释音乐内容的、视听结合

你的名字/ 2023年10月01日 15:49/ 0 赞/ 37 阅读

相关互动应用开发p5.js——Perlin噪声生成烟雾（柏林噪声）

Perlin噪声生成烟雾一、实验内容：和鼠标交互结合生成Perlin Noise的烟雾效果要求使用p5.js实现烟雾随机生成效果： 1. 流场利用Per

小咪咪/ 2023年10月01日 15:49/ 0 赞/ 32 阅读

相关互动应用开发p5.js——星星的运动

星星的运动一、实验内容：按照章节要求使用p5.js实现星星随机向画布边界运动的效果： 1. 星星近大远小；（20分） 2. 能拖出尾迹；（30分） 3.

╰+哭是因爲堅強的太久メ/ 2023年10月01日 15:48/ 0 赞/ 35 阅读

相关互动应用开发p5.js——冒泡排序可视化

冒泡排序可视化一、实验内容实验要求： 1. 实现10个数以上的冒泡排序可视化 2. 体现两两交换过程 3. 动画速度可由变量控制 4. 代码注释完

不念不忘少年蓝@/ 2023年10月01日 15:48/ 0 赞/ 31 阅读

相关 HTML5——太阳系环绕动画

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2

╰+攻爆jí腚メ/ 2023年07月20日 12:26/ 0 赞/ 67 阅读

相关 matlab 太阳系仿真,三维仿真太阳系

三维仿真太阳系是一款三维太阳系软件，展示的是3d太阳系模型，是学习的非常好的软件，虽然界面是e文的，有个人教教，对小孩学习太阳系系统知识是非常好的。体积小，但功能强大。界面非常

蔚落/ 2023年01月16日 09:54/ 0 赞/ 240 阅读

相关 canvas案例———太阳系

本文将结合面向对象和canvas来模拟太阳系当然有许多参数不太准确，不过重点是如何使用面向对象和canvas实现效果侧重点要放在重点上不是很懂面向对象的小伙伴要先看

谁践踏了优雅/ 2022年01月23日 04:45/ 0 赞/ 478 阅读