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张图片贴图以及音乐

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

互动应用开发p5.js——音视频交互
音视频交互一.实验内容: 音频可视化,是指一种以视觉为核心,以音频为载体,以大众为诉求对象,借助多种新媒体技术等传播媒介,通过画面.影像来诠释音乐内容的.视听结合的大众化传播方式.它能为理解.分析和 ...
p5.js 编程临摹动态图形（互动媒体技术作业）
p5.js 编程临摹动态图形(互动媒体技术作业) 动态图形的规律分析 p5.js 代码历程走过的弯路拓展总结动态图形的规律分析从老师的动态图形参考资料中,我选择了以下图形进行临摹: 初次见面 ...
全景虚拟漫游技术实现(three.js vs ThingJS) Javascript 3D开发前端物联网 webgl 三维建模 3D模型虚拟全景
三维建模无非就是通过专业技能加工成立体图形,使之图形成为直观.易懂,容易判读的立体图件.对于开发者来说,选择一个好的3D开发框架,在全景虚拟漫游场景上实现3D动效,ThingJS vs three.j ...
互动媒体技术——基于p5.js实现动态图形临摹与拓展：炫彩光影的千变万化！
博文索引目录: 1. 引言 2. 临摹结果对比 3. 临摹过程 3.1 准备工作 3.2 原图规律--语言描述 3.3 原图规律--数学与代码描述 3.4 完整代码 4. 创意拓展 4.1 拓展一-- ...
P5.js开发之——介绍(1)
一概述 p5.js 是一个JavaScript的函数库它在制作之初就和Processing有同样的目标.就是让艺术家,设计师,教育工作者和编程初学者能够很容易,很轻松地学习和使用程序设计利用插件 ...
P5.js开发之——环境
一概述 P5.js开发环境主要包含下面的内容: 描述信息属性及常量操作及功能二描述信息 2.1 元素列表 No 属性说明 1 describe 描述执行的方法或内容 2 describeE ...
p5.js 绘制创意自画像（互动媒体技术作业）
p5.js 绘制创意自画像Little Prince(互动媒体技术作业) 作品展示代码&创意点分析 1.设置工具类以获取坐标点:本次实验最有用的东西就是这个了 2.眼睛跟随鼠标运动: 3.披 ...
P5.js开发之——开发环境(2)
一概述本文介绍P5.js的两种开发环境: P5.jsweb编辑器:官方提供了页面编辑及运行预览环境本地开发环境(VScode):基于插件创建项目并进行开发二 P5.jsweb编辑器 2.1 w ...
p5.js 实现动态互动画板
目标编写一个"绘画系统",提供一系列绘画材料(例如画笔/颜料/滤镜)给用户操作,以创作出动态/交互的绘画作品.这个绘画系统是对"绘画"的概念的扩展,但仍然体现 ...

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