Three.js 实现3D模拟太阳系 - hn的个人页面 - 开源中国

安宇雨 - 随手采集
2018-10-13 16:36:50
随手采集
0000-未整理-等待研究

最近研究了一下Three.js发现功能很强大，把之前写过的太阳系改造成3D版本，效果还不错，废话少说，直接上图：

下面我来简单的介绍一下实现过程。太阳系包含太阳，8大行星及其它们各自的卫星，在此着重介绍下地月运动。

1. 创建太阳（自发光）

function createSphere_sun(radius, segments,img){
    return new THREE.Mesh(new THREE.SphereGeometry(radius, segments, segments),new THREE.MeshLambertMaterial( {
        //加载太阳纹理
        map: THREE.ImageUtils.loadTexture(img) ,
        //球体亮度，颜色越灰，球体越暗
        emissive:0xffffff
    }));
}

2. 创建太阳光线

/**
 * 太阳光线
 * @returns {THREE.ShaderSprite.sprite|{vertexShader, fragmentShader}|*|THREE.ShaderLib.sprite}
 */
function createSprits(color,img){
    return new THREE.Sprite(new THREE.SpriteMaterial(
        {
            map: new THREE.ImageUtils.loadTexture( 'images/solar/glow.png' ),
            useScreenCoordinates: false, alignment: THREE.SpriteAlignment.center,
            color: 0xFEAB10, transparent: true, blending: THREE.AdditiveBlending
        }));
}

3. 创建行星体（向阳面和被阴面）

function createSphere(radius, segments,img) {
    return new THREE.Mesh(new THREE.SphereGeometry(radius, segments, segments), new THREE.MeshPhongMaterial({
        map: THREE.ImageUtils.loadTexture(img),//加载星体纹理
    }));
}

4. 创建星体公转轨道

/**
 * 画轨道(天体轨道)
 * @param radius 轨道半径
 * @param segments
 * @param angle 
 * @param opacity 透明度
 * @returns {THREE.Mesh}
 */
function createOrbit(radius, segments,angle,opacity){
    //innerRadius, outerRadius, thetaSegments, phiSegments, thetaStart, thetaLength
    var orbit = new THREE.Mesh(new THREE.RingGeometry(radius,  radius + 8, 2 * segments, 5, 0, Math.PI * 2), new THREE.MeshBasicMaterial({
        map: THREE.ImageUtils.loadTexture('images/ring.png'),
        side: THREE.DoubleSide,
        transparent: true,
        //透明度
        opacity: opacity
    }));
    orbit.rotation.set(angle,0, 0);
    return orbit;
}

5. 地月运动

function drawEarthAndMoon(axisHelper){
    //创建地球
    earth = createSphere(30,32,'images/solar/earth.jpg');
    //地球自转倾斜角度
    earth.rotation.set(Math.PI / 4,0, 0);
    //创建月球
    moon = createSphere(15,32,'images/solar/moon.jpg');
    //在以地球球心为原点的坐标系中的位置
    moon.position.set(80,0,0);
    
    
    //月球公转：月球绕地球中心旋转
    moon_object3D = new THREE.Object3D();//moon_object3D 将月球与地球绑定，以地球球心为中心旋转(即月球公转)
    moon_object3D.position.set(500,0,0);//moon_object3D的位置为地球球心
    //添加地球
    moon_object3D.add(earth);
    
    //添加月球
    moon_object3D.add(moon);
    //添加月球公转轨道
    moon_object3D.add( createOrbit(80,50,Math.PI / 2,0.3));
    
    //地球公转：地球绕太阳中心旋转
    earth_object3D = new THREE.Object3D();
    earth_object3D.add(moon_object3D);
    
    moon_object3D.add(axisHelper);
    earth_object3D.add(axisHelper);
    scene.add(earth_object3D);
    
    //添加地球公转轨道
    scene.add(createOrbit(500,500,Math.PI / 2,0.3));
}

//画太阳系
function drawSolarSystem() {
    var axisHelper = new THREE.AxisHelper(4);
    // CUSTOM // 地球-月球
    drawEarthAndMoon(axisHelper);
}

function render() {
    earth_object3D.rotation.y += 0.001;//地球公转
    moon_object3D.rotation.y += 0.01;//月球公转
    
    earth.rotation.y += 0.01;//地球自转
    moon.rotation.y += 0.01;//月球自转

    requestAnimationFrame(animate);
    renderer.render( scene, camera );
}

第一个版本做的比较简略，细节等下个版本完善后再作介绍。

想获取源码者请点击以下链接，别忘了点个赞哦 ∩_∩

源码下载地址

学习交流QQ群 : 3D-WebGL学习交流群 391273975

原网址: 访问
创建于: 2018-10-13 16:36:50
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论