1,介绍
该示例使用的是 r95版本Three.js库。
主要实现功能:宇宙星空背景,流星星星闪烁,地球自转,卫星绕地运动。
实际效果还是很丝滑的,GIF效果图如下:
2,主要说明
1,宇宙背景利是用背景图片+粒子效果zai。
2,流星是使用一张透明图片,随机一个位置进行固定方向移动。
3,地球是用SphereGeometry创建球几何体并进行贴图,案例地球中设置了多层贴图,这样地球会表现比较立体。
4,轨道是用RingGeometry创建一个圆环并设置显示角度。
5,卫星是用精灵对象创建一个精灵并进行贴图,精灵是一个总是面朝着摄像机的平面,所以用一个透明的卫星图片即可,然后这只绕Y轴进行运动。
/** * 星星粒子 */ function stars() { var starsGeometry = new THREE.Geometry(); for (var i = 0; i < 3000; i++) { var starVector = new THREE.Vector3( THREE.Math.randFloatSpread(4000), THREE.Math.randFloatSpread(3000), THREE.Math.randFloatSpread(4000) ); starsGeometry.vertices.push(starVector); starsGeometry.name = "starsGeometry" + i; } var starsMaterial = new THREE.PointsMaterial({ color: 0x888888, sizeAttenuation: false }) var starsPoint = new THREE.Points(starsGeometry, starsMaterial); starsPoint.name = "starsPoint"; group.add(starsPoint); }
/** * 返回行星轨道的组合体 * @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.3, 200, 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(-Math.PI * 0.45, Math.PI * 0.1, 0); scene.add(centerMesh); return { starLite: centerMesh, speed: speed }; } // 地球卫星 starLites.push(initSatellite(10, 150, { x: 0, y: 0, z: 0 }, 0.01, 'assets/earth/satellite.png', scene));
3,源码和模型
需要学习案例、素材、模型或者其他源码,请进入博客首页查看其他文章或者留言