介绍//,初始化场景
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 ({
,,,,,α:,真的,
,,,,,平滑:真实
}); //,设置窗口尺寸,第一个参数为宽度,第二个参数为高度
renderer.setSize (dom.clientWidth, dom.clientHeight);//,初始化控制器
var orbitcontrols =, new THREE.OrbitControls(相机,renderer.domElement);//,将渲染器加载到dom中
dom.appendChild (renderer.domElement); //,定义太阳材质
var sunTexture =, THREE.ImageUtils.loadTexture(& # 39;。/图像/sun_bg.jpg& # 39;,, {},, function (), {
,,,renderer.render(场景,相机);
});//,太阳以及太阳材质设定
时间=centerBall new THREE.Mesh (new THREE.SphereGeometry(30日,30日,30),,new THREE.MeshBasicMaterial ({
,,,地图:sunTexture
}));
scene.add (centerBall); /* *
*,实现球体发光
*,@param color 颜色的r, g和b值,比如:“123123123”;
*,@returns {元素},返回画布对象
*/var generateSprite =, function (颜色),{
,,var canvas =, document.createElement(& # 39;帆布# 39;);
,,canvas.width =, 16;
,,canvas.height =, 16;
,,var context =, canvas.getContext (& # 39; 2 d # 39;);
,,var gradient =, context.createRadialGradient(时间/canvas.width 2, canvas.height /, 2,, 0,, canvas.width /,,,
,,canvas.height /, 2, canvas.width /, 2);
,,gradient.addColorStop (0,, & # 39; rgba (& # 39;, +, color +, & # 39; (1) & # 39;);
,,gradient.addColorStop (0.2,, & # 39; rgba (& # 39;, +, color +, & # 39; (1) & # 39;);
,,gradient.addColorStop (0.4,, & # 39; rgba (& # 39;, +, color +, & # 39; (6) & # 39;);
,,gradient.addColorStop (1, & # 39; rgba (0, 0, 0, 0) & # 39;);
,,context.fillStyle =,梯度;
,,context.fillRect (0, 0, canvas.width,, canvas.height);
,,return 帆布;
}；//,添加太阳发光效果
var centerBallLite =, new THREE.Sprite (new THREE.SpriteMaterial ({
,,,地图:new THREE.CanvasTexture (generateSprite (sunSpriteColor)),
,,混合:THREE.AdditiveBlending
}));
时间==centerBallLite.scale.x centerBallLite.scale.y centerBallLite.scale.z =, sunScaleSize;
scene.add (centerBallLite); /* *
,*返回行星轨道的组合体
,* @param starLiteSize 行星的大小
,* @param starLiteRadius 行星的旋转半径
,* @param rotation 行星组合体的x, y, z三个方向的旋转角度
,* @param speed 行星运动速度
,* @param imgUrl 行星的贴的图
,* @param scene 场景
,* @returns {{卫星:THREE.Mesh,,速度:,*}},卫星组合对象,速度
*/var initSatellite =, function (starLiteSize, starLiteRadius,,旋转,速度,imgUrl,,场景),{
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 ({
,,,,地图:,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(蓝锆石);
pivotPoint.add(跟踪);
centerMesh.add (pivotPoint);
null
null
null
null
null
null
null
null
null
null
null
null
null
使用三个。js怎么模拟一个太阳系行星体系?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
<强>概况如下:
1, SphereGeometry实现自转的太阳;
2, RingGeometry实现太阳系星系的公转轨道;
3, ImageUtils加载球体和各行星贴图;
4,画布中createRadialGradient实现太阳发光效果;
5,三人。雪碧精灵实现太阳系行星。
设置场景窗口尺寸,并且初始化控制器,窗口尺寸默认与浏览器窗口尺寸保持一致,最后将渲染器加载到dom中。
定义太阳及其材质,太阳通过SphereGeometry来实现,通过ImageUtils来导入贴图。
太阳发光效果通过雪碧引入帆布渲染的createRadialGradient来实现。
太阳系各行星公转轨道通过RingGeometry来实现,公转轨道偏移通过位置来实现,行星体系通过三。雪碧来实现。
