模拟太阳系的html,three.js模拟实现太阳系行星体系功能

概况如下：

1、 spheregeometry 实现自转的太阳；

2、 ringgeometry 实现太阳系星系的公转轨道；

3、 imageutils 加载球体和各行星贴图；

4、 canvas 中 createradialgradient 实现太阳发光效果；

5、 three.sprite 精灵实现太阳系行星。

效果图如下：

预览地址：

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

// 初始化场景

var scene = new three.scene();

// 初始化相机，第一个参数为摄像机视锥体垂直视野角度，第二个参数为摄像机视锥体长宽比，

// 第三个参数为摄像机视锥体近端面，第四个参数为摄像机视锥体远端面

var camera = new three.perspectivecamera(20, dom.clientwidth / dom.clientheight, 1, 100000);

// 设置相机位置，对应参数分别表示x，y，z位置

camera.position.set(0, 0, 500);

var renderer = new three.webglrenderer({

alpha: true,

antialias: true

});

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

// 设置窗口尺寸，第一个参数为宽度，第二个参数为高度

renderer.setsize(dom.clientwidth, dom.clientheight);

// 初始化控制器

var orbitcontrols = new three.orbitcontrols(camera,renderer.domelement);

// 将渲染器加载到dom中

dom.appendchild(renderer.domelement);

定义太阳及其材质，太阳通过 spheregeometry 来实现，通过 imageutils 来导入贴图。

// 定义太阳材质

var suntexture = three.imageutils.loadtexture('./image/sun_bg.jpg', {}, function () {

renderer.render(scene, camera);

});

// 太阳以及太阳材质设定

centerball = new three.mesh(new three.spheregeometry(30, 30, 30), new three.meshbasicmaterial({

map: suntexture

}));

scene.add(centerball);

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

/**

* 实现球体发光

* @param color 颜色的r,g和b值,比如：“123,123,123”;

* @returns {element} 返回canvas对象

*/

var generatesprite = function (color) {

var canvas = document.createelement('canvas');

canvas.width = 16;

canvas.height = 16;

var context = canvas.getcontext('2d');

var gradient = context.createradialgradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2,

canvas.height / 2, canvas.width / 2);

gradient.addcolorstop(0, 'rgba(' + color + ',1)');

gradient.addcolorstop(0.2, 'rgba(' + color + ',1)');

gradient.addcolorstop(0.4, 'rgba(' + color + ',.6)');

gradient.addcolorstop(1, 'rgba(0,0,0,0)');

context.fillstyle = gradient;

context.fillrect(0, 0, canvas.width, canvas.height);

return canvas;

};

// 添加太阳发光效果

var centerballlite = new three.sprite(new three.spritematerial({

map: new three.canvastexture(generatesprite(sunspritecolor)),

blending: three.additiveblending

}));

centerballlite.scale.x = centerballlite.scale.y = centerballlite.scale.z = sunscalesize;

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 来实现。

// 执行函数

var render = function () {

renderer.render(scene, camera);

centerball.rotation.y -= 0.01;

for (var i = 0; i < starlites.length; i++) {

starlites[i].starlite.rotation.z -= starlites[i].speed;

}

orbitcontrols.update();

requestanimationframe(render);

}

总结

以上所述是小编给大家介绍的three.js模拟实现太阳系行星体系功能,希望对大家有所帮助