threejs模拟太阳系八大行星公转及自转三维模型_three.js实现太阳系资源-CSDN文库

共13个文件

png：10个

js：2个

html：1个

需积分: 5 48 浏览量 2024-02-04 09:02:19 上传评论收藏 1.39MB ZIP 举报

在本项目中，"threejs模拟太阳系八大行星公转及自转三维模型"是一个使用Three.js库构建的互动Web应用程序。Three.js是JavaScript的一个强大框架，专门用于创建和展示三维图形，尤其在网络浏览器上。这个项目的目标是通过视觉方式展示太阳系中各个行星的运动轨迹，包括自转和公转。我们要理解什么是自转和公转。自转是指行星围绕自身的轴线旋转，就像地球每天自转一圈形成昼夜一样。而公转则是指行星围绕太阳的轨道运行，如地球绕太阳一年公转一周形成一年四季。在我们的项目中，这些动态效果被逼真地模拟出来，使用户能够直观地观察到每个行星的运动规律。项目中包含的文件有以下几个关键部分： 1. `index-solar.html`：这是主HTML文件，包含了网页的基本结构和Three.js应用的入口。它通常会引入Three.js库和其他必要的脚本，比如`OrbitControls.js`，并创建一个WebGL渲染器，用于在浏览器中显示三维场景。 2. `three.js`：这是Three.js库的核心文件，提供了创建、管理和渲染3D对象的所有功能。开发者可以利用它来创建几何体、材质、光源等元素，并定义动画行为。 3. `OrbitControls.js`：这是一个Three.js插件，提供了交互式控制，允许用户通过鼠标或触摸设备旋转、缩放和平移视图，更好地观察太阳系模型。 4. `Earth.png`, `solar.png`, `Saturn.png`, `Mercury.png`, `Sun.png`, `Venus.png`, `Mars.png`：这些是行星和太阳的纹理图片，用于给3D模型添加真实的外观。开发者会将这些图像应用到对应的几何体表面，增加视觉效果的真实感。在实现这个项目时，开发者首先会创建一个太阳系的场景，然后为每个天体（太阳和八大行星）创建3D模型。模型可能由基本几何体（如球体）构成，再附加相应的纹理。接着，他们会设置每个行星的公转轨道和自转轴，通过Three.js的动画功能实现周期性的旋转运动。行星的自转可以通过修改其几何体的旋转属性来实现，而公转则需要计算行星相对于太阳的运动轨迹。这通常涉及天文学中的椭圆轨道和开普勒定律。`OrbitControls.js`使得用户可以从任意角度查看整个系统，增强了用户体验。这个项目展示了Three.js在可视化科学概念方面的潜力，以及如何利用JavaScript和WebGL技术创建引人入胜的交互式3D应用程序。无论是教育用途还是娱乐目的，这样的太阳系模型都是一个极好的示例，可以帮助人们更好地理解和欣赏我们所在的宇宙。

资源推荐

资源详情

资源评论

收起资源包目录

demo-solar.zip （13个子文件）

Earth.png 408KB

OrbitControls.js 27KB

three.js 1.31MB

solar.png 284KB

index-solar.html 7KB

Saturn.png 100KB

Jupiter.png 43KB

Neptune.png 41KB

Venus.png 66KB

Mars.png 48KB

Sun.png 73KB

Uranus.png 23KB

Mercury.png 86KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson1-by-shawn.xie</title>  <script src="three.js"></script> <script src="OrbitControls.js"></script> <script type="text/javascript"> //宽高 const width = window.innerWidth - 30; const height = window.innerHeight - 30; //场景 const scene = new THREE.Scene(); //相机 const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 5000000); //渲染器 const renderer = new THREE.WebGLRenderer({ // alpha: true, //让背景透明,默认是黑色，以显示我们自己的背景图 }); //控制器 let cameraControls; const revolutionSpeedRatio = 100; //行星参数 const stars = [ { name: '太阳', radius: 69.550, textureImg: 'Sun.png', centerPosition: { x: 0, y: 0, z: 0 }, rotationSpeed: Math.PI / 100 / 25.5/*自转速度*/, }, { name: '水星', radius: 2.440, textureImg: 'Mercury.png', centerPosition: { x: 0, y: 0, z: 57909 / 500 }, rotationSpeed: Math.PI / 100 / 58/*自转速度*/, revolutionRadiusX: 69816.9 / 500, revolutionRadiusY: 46001.2 / 500, revolutionDiviseLength: 87.9/365*revolutionSpeedRatio/*公转速度有关,越大，转速越慢*/, revolutionDiviseInd: 0 }, { name: '金星', radius: 6.051, textureImg: 'Venus.png', centerPosition: { x: 0, y: 0, z: 108200 / 500 }, rotationSpeed: Math.PI / 100 / 243/*自转速度*/, revolutionRadiusX: 108942 / 500, revolutionRadiusY: 107476 / 500, revolutionDiviseLength: 224.701/365*revolutionSpeedRatio, revolutionDiviseInd: 0 }, { name: '地球', radius: 6.371, textureImg: 'Earth.png', centerPosition: { x: 0, y: 0, z: 147000 / 500 }, rotationSpeed: Math.PI / 100 / 1/*自转速度*/, revolutionRadiusX: 149600 / 500, revolutionRadiusY: 149580 / 500, revolutionDiviseLength: revolutionSpeedRatio, revolutionDiviseInd: 0 }, { name: '火星', radius: 3.396, textureImg: 'Mars.png', centerPosition: { x: 0, y: 0, z: 227940 / 500 }, rotationSpeed: Math.PI / 100 / 1.05/*自转速度*/, revolutionRadiusX: 249200 / 500, revolutionRadiusY: 206600 / 500, revolutionDiviseLength: 686.971/365*revolutionSpeedRatio, revolutionDiviseInd: 0 }, { name: '木星', radius: 69.911, textureImg: 'Jupiter.png', centerPosition: { x: 0, y: 0, z: 778330 / 500 }, rotationSpeed: Math.PI / 100 / 0.375/*自转速度*/, revolutionRadiusX: 817000 / 500, revolutionRadiusY: 741000 / 500, revolutionDiviseLength: 11.862*revolutionSpeedRatio, revolutionDiviseInd: 0 }, { name: '土星', radius: 60.268, textureImg: 'Saturn.png', centerPosition: { x: 0, y: 0, z: 1429400 / 500 }, rotationSpeed: Math.PI / 100 / 0.4/*自转速度*/, revolutionRadiusX: 1514500 / 500, revolutionRadiusY: 1355250 / 500, revolutionDiviseLength: 29.4571*revolutionSpeedRatio, revolutionDiviseInd: 0 }, { name: '海王星', radius: 24.622, textureImg: 'Neptune.png', centerPosition: { x: 0, y: 0, z: 4496000 / 500 }, rotationSpeed: Math.PI / 100 / 0.667/*自转速度*/, revolutionRadiusX: 4553946 / 500, revolutionRadiusY: 4452940 / 500, revolutionDiviseLength: 164.8*revolutionSpeedRatio, revolutionDiviseInd: 0 }, { name: '天王星', radius: 25.362, textureImg: 'Uranus.png', centerPosition: { x: 0, y: 0, z: 28709900 / 500 }, rotationSpeed: Math.P / 100 / 0.65/*自转速度*/, revolutionRadiusX: 30044197.04 / 500, revolutionRadiusY: 2748938.461 / 500, revolutionDiviseLength: 84.0205*revolutionSpeedRatio, revolutionDiviseInd: 0 } ] function addStar(star, index) { const geometry = new THREE.SphereGeometry(star.radius, 100, 100); const material = new THREE.MeshBasicMaterial({ /*wireframe: true,*/ map: new THREE.TextureLoader().load(star.textureImg) }); const starObj = new THREE.Mesh(geometry, material); starObj.position.x = star.centerPosition.x; starObj.position.y = star.centerPosition.y; starObj.position.z = star.centerPosition.z; scene.add(starObj) //设置公转椭圆曲线 const curve = new THREE.EllipseCurve( 0, 0, // ax, aY star.revolutionRadiusX, star.revolutionRadiusY, // xRadius, yRadius 0, 2 * Math.PI, // aStartAngle, aEndAngle false, // aClockwise 0 // aRotation ); const points = curve.getPoints(star.revolutionDiviseLength) //设置对象 stars[index].starObj = starObj; stars[index].revolutionPoints = points; } //渲染 function animate() { requestAnimationFrame(animate); cameraControls.update();//更新控制器 renderer.render(scene, camera); stars.forEach((star, index) => { //自转 stars[index].starObj.rotation.y += 0.1; //公转 if(index==0) //太阳不参与公转 return; if (star.revolutionDiviseInd >= star.revolutionDiviseLength) { stars[index].revolutionDiviseInd = 0; } else { stars[index].starObj.position.x = stars[index].revolutionPoints[star.revolutionDiviseInd].x; stars[index].starObj.position.z = stars[index].revolutionPoints[star.revolutionDiviseInd].y; star.revolutionDiviseInd++; } }) } function threeStart() { //设置渲染器 renderer.setSize(width, height); document.body.appendChild(renderer.domElement); //设置控制器 cameraControls = new THREE.OrbitControls(camera, renderer.domElement); //设置相机位置 camera.position.set(100, 200, 10000); //增加辅助坐标轴 var axeshelper = new THREE.AxesHelper(6000);//轴辅助，参数为轴大小 scene.add(axeshelper); //ArrowHelper,用于模拟方向的3维箭头对象.z轴/红，y轴/绿，x轴/蓝 scene.add(new THREE.ArrowHelper(new THREE.Vector3(1, 0, 0), new THREE.Vector3(0, 0, 0), 6000, 0x0000ff, 100)); //控制器设置 cameraControls.target = new THREE.Vector3(0, 1, 0); //绕目标坐标运动 //GridHelper，坐标格辅助对象. 坐标格实际上是2维线数组. const gridHelper = new THREE.GridHelper( 12000/*size*/, 100/*divisions*/ ); scene.add( gridHelper ); stars.forEach((star, index) => { addStar(star, index) }) //渲染 animate(); } </script> </head> <body onload='threeStart();'> </body> </html>

评论收藏

内容反馈