邪气丛生,曹安娜男友,滑块
概况如下:
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模拟实现太阳系行星体系功能,希望对大家有所帮助
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
HTML5 HTMLCollection和NodeList的区别详解
网友评论