码迷,mamicode.com
首页 > Web开发 > 详细

three.js模拟实现太阳系行星体系

时间:2019-09-02 23:47:14      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:geo   tco   class   ble   执行函数   center   asi   ast   rtm   

概况如下:

1、SphereGeometry实现自转的太阳;

2、RingGeometry实现太阳系星系的公转轨道;

3、ImageUtils加载球体和各行星贴图;

4、canvascreateRadialGradient实现太阳发光效果;

5、THREE.Sprite精灵实现太阳系行星。

效果图如下:

技术图片

 预览地址:three.js模拟实现太阳系行星体系

初始化场景、相机、渲染器,设置相机位置。

 1 // 初始化场景
 2 var scene = new THREE.Scene();
 3 // 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄像机视锥体长宽比,
 4 // 第三个参数为摄像机视锥体近端面,第四个参数为摄像机视锥体远端面
 5 var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
 6 // 设置相机位置,对应参数分别表示x,y,z位置
 7 camera.position.set(0, 0, 500);
 8 var renderer = new THREE.WebGLRenderer({
 9       alpha: true,
10       antialias: true
11 });

设置场景窗口尺寸,并且初始化控制器,窗口尺寸默认与浏览器窗口尺寸保持一致,最后将渲染器加载到dom中。

1 // 设置窗口尺寸,第一个参数为宽度,第二个参数为高度
2 renderer.setSize(dom.clientWidth, dom.clientHeight);
3 // 初始化控制器
4 var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
5 // 将渲染器加载到dom中
6 dom.appendChild(renderer.domElement);

定义太阳及其材质,太阳通过SphereGeometry来实现,通过ImageUtils来导入贴图。

1 // 定义太阳材质
2 var sunTexture = THREE.ImageUtils.loadTexture(‘./image/sun_bg.jpg‘, {}, function () {
3     renderer.render(scene, camera);
4 });
5 // 太阳以及太阳材质设定
6 centerBall = new THREE.Mesh(new THREE.SphereGeometry(30, 30, 30), new THREE.MeshBasicMaterial({
7     map: sunTexture
8 }));
9 scene.add(centerBall);

太阳发光效果通过Sprite引入canvas渲染的createRadialGradient来实现。

 1 /**
 2  * 实现球体发光
 3  * @param color 颜色的r,g和b值,比如:“123,123,123”;
 4  * @returns {Element} 返回canvas对象
 5  */
 6 var generateSprite = function (color) {
 7     var canvas = document.createElement(‘canvas‘);
 8     canvas.width = 16;
 9     canvas.height = 16;
10     var context = canvas.getContext(‘2d‘);
11     var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, 
12     canvas.height / 2, canvas.width / 2);
13     gradient.addColorStop(0, ‘rgba(‘ + color + ‘,1)‘);
14     gradient.addColorStop(0.2, ‘rgba(‘ + color + ‘,1)‘);
15     gradient.addColorStop(0.4, ‘rgba(‘ + color + ‘,.6)‘);
16     gradient.addColorStop(1, ‘rgba(0,0,0,0)‘);
17     context.fillStyle = gradient;
18     context.fillRect(0, 0, canvas.width, canvas.height);
19     return canvas;
20 };
21 // 添加太阳发光效果
22 var centerBallLite = new THREE.Sprite(new THREE.SpriteMaterial({
23     map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)),
24     blending: THREE.AdditiveBlending
25 }));
26 centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = sunScaleSize;
27 scene.add(centerBallLite);

太阳系各行星公转轨道通过RingGeometry来实现,公转轨道偏移通过position来实现,行星体系通过THREE.Sprite来实现。

/**
 * 返回行星轨道的组合体
 * @param starLiteSize 行星的大小
 * @param starLiteRadius 行星的旋转半径
 * @param rotation 行星组合体的x,y,z三个方向的旋转角度
 * @param speed 行星运动速度
 * @param imgUrl 行星的贴图
 * @param scene 场景
 * @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度
*/
var initSatellite = function (starLiteSize, starLiteRadius, rotation, speed, imgUrl, scene) {
var track = new THREE.Mesh(new THREE.RingGeometry(starLiteRadius, starLiteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial());
var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材质设定
var starLite = new THREE.Sprite(new THREE.SpriteMaterial({
     map: THREE.ImageUtils.loadTexture(imgUrl)
}));
starLite.scale.x = starLite.scale.y = starLite.scale.z = starLiteSize;
starLite.position.set(starLiteRadius, 0, 0);
var pivotPoint = new THREE.Object3D();
pivotPoint.add(starLite);
pivotPoint.add(track);
centerMesh.add(pivotPoint);
centerMesh.rotation.set(rotation.x, rotation.y, rotation.z);
scene.add(centerMesh);
   return {starLite: centerMesh, speed: speed};
};

将创建好的太阳及行星自转公转体系渲染到场景中,自转和公转通过定时修改position值来实现,动画使用requestAnimationFrame来实现。

 1 // 执行函数
 2 var render = function () {
 3     renderer.render(scene, camera);
 4     centerBall.rotation.y -= 0.01;
 5     for (var i = 0; i < starLites.length; i++) {
 6         starLites[i].starLite.rotation.z -= starLites[i].speed;
 7     }
 8     orbitcontrols.update();
 9     requestAnimationFrame(render);
10 }

 

three.js模拟实现太阳系行星体系

标签:geo   tco   class   ble   执行函数   center   asi   ast   rtm   

原文地址:https://www.cnblogs.com/gaozhiqiang/p/11450433.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!