three.js模拟实现太阳系行星体系
Posted gaozhiqiang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了three.js模拟实现太阳系行星体系相关的知识,希望对你有一定的参考价值。
概况如下:
1、SphereGeometry
实现自转的太阳;
2、RingGeometry
实现太阳系星系的公转轨道;
3、ImageUtils
加载球体和各行星贴图;
4、canvas
中createRadialGradient
实现太阳发光效果;
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模拟实现太阳系行星体系的主要内容,如果未能解决你的问题,请参考以下文章