WebGL Solar System

最新推荐文章于 2025-04-04 22:37:12 发布

原创最新推荐文章于 2025-04-04 22:37:12 发布 · 834 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#sun #function #360 #vector #object #system

本文介绍了一个使用Three.js库实现的太阳系行星运行模拟项目。该模拟不仅展现了各行星围绕太阳公转的效果，还实现了自转功能，并允许用户通过鼠标交互选择行星以显示详细信息。

点击图片转到我的51cto博客查看

附源代码：

<!doctype html>
<html lang="en">
<head>
    <title>webgl solar system</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            color: #61443e;
            font-family:Monospace;
            font-size:13px;
            text-align:center;

            background-color: #aaccff;
            margin: 0px;
            overflow: hidden;
        }

        #info {
            color: #ffffff;
            position: absolute;
            top: 0px; width: 100%;
            padding: 5px;
        }

        a {

            color: yellow;
        }

        #oldie {
            background:rgb(0,0,50) !important;
            color:#fff !important;
        }

    </style>
</head>
<body>

<div id="container"></div>

<script src="Three.js"></script>

<script src="Detector.js"></script>
<script src="Stats.js"></script>
<script>

    if ( ! Detector.webgl ) {

        Detector.addGetWebGLMessage();
        document.getElementById( 'container' ).innerHTML = "";

    }

    var container, stats;

    var camera, controls, scene, renderer, projector;

    var mouse = new THREE.Vector2();

    var objects = [], SELECTED;

    var clock = new THREE.Clock();

    var starsArray = ["Sun","Mercury","Venus","Earth","Mars","Jupiter","Saturn","Uranus","Neptune","Pluto"];
    var stars = {
        Sun:{OrbitTime:99999, RotationTime:99999, Radius:100, InitAngle:0, texture:"Data/sun.png", position:new THREE.Vector3(0, 0, 0),rotaionRadius : 0,desc:""},
        Mercury:{OrbitTime:87.969, RotationTime:1407.6, Radius:20, InitAngle:30, texture:"Data/mercury.png", position:new THREE.Vector3(200, 0, 0),rotaionRadius : 500,desc:""},
        Venus:{OrbitTime:224.7, RotationTime:243 * 23.9, Radius:30, InitAngle:90, texture:"Data/venus.png", position:new THREE.Vector3(300, 0, 0),rotaionRadius : 600,desc:""},
        Earth:{OrbitTime:365.25636, RotationTime:23.9, Radius:50, InitAngle:120, texture:"Data/earth.png", position:new THREE.Vector3(400, 0, 0),rotaionRadius : 700,desc:""},
        Mars:{OrbitTime:687, RotationTime:24.6, Radius:25, InitAngle:250, texture:"Data/mars.png", position:new THREE.Vector3(500, 0, 0),rotaionRadius : 800,desc:""},
        Jupiter:{OrbitTime:11.86 * 365.25636, RotationTime:9.9, Radius:90, InitAngle:200, texture:"Data/jupiter.png", position:new THREE.Vector3(700, 0, 0),rotaionRadius : 900,desc:""},
        Saturn:{OrbitTime:29.5 * 365.25636, RotationTime:10.67, Radius:80, InitAngle:160, texture:"Data/saturn.png", position:new THREE.Vector3(900, 0, 0),rotaionRadius : 1000,desc:""},
        Uranus:{OrbitTime:84 * 365.25636, RotationTime:15.6, Radius:60, InitAngle:270, texture:"Data/uranus.png", position:new THREE.Vector3(1000, 0, 0),rotaionRadius : 1100,desc:""},
        Neptune:{OrbitTime:164.8 * 365.25636, RotationTime:18.4, Radius:55, InitAngle:60, texture:"Data/neptune.png", position:new THREE.Vector3(1100, 0, 0),rotaionRadius : 1200,desc:""},
        Pluto:{OrbitTime:248 * 365.25636, RotationTime:6.38, Radius:10, InitAngle:150, texture:"Data/pluto.png", position:new THREE.Vector3(1200, 0, 0),rotaionRadius : 1300,desc:""}
    };

    var earthObject;

    init();
    animate();

    function init() {

        container = document.getElementById( 'container' );

        scene = new THREE.Scene();
        //scene.fog = new THREE.FogExp2( 0xaaccff, 0.0007 );

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 20000 );
        camera.position.x = 0;
        camera.position.y = 50;
        camera.position.z = 200;
        scene.add( camera );

        controls = new THREE.FirstPersonControls( camera );
        controls.movementSpeed = 300;
        controls.lookSpeed = 0.01;
        controls.lon = 300;

        scene.add( new THREE.AmbientLight( 0x777777 ) );

        var sun_light = new THREE.PointLight( 0xffffff,1,3000);
        sun_light.position.set( 500, 0, 0 );
        scene.add( sun_light );
        sun_light = new THREE.PointLight( 0xffffff,1,3000);
        sun_light.position.set( -500, 0, 0 );
        scene.add( sun_light );
        sun_light = new THREE.PointLight( 0xffffff,1,3000);
        sun_light.position.set( 0, 500, 0 );
        scene.add( sun_light );
        sun_light = new THREE.PointLight( 0xffffff,1,3000);
        sun_light.position.set( 0, -500, 0 );
        scene.add( sun_light );

        var star,materials,starObject;
        for(var i=0;i<starsArray.length;i++){
            eval("star = stars."+starsArray[i]+";");
            if(starsArray[i] == "Sun"){
                materials = new THREE.MeshPhongMaterial( { ambient: 0xffffff,specular:0xffffff,shininess:3000, map: THREE.ImageUtils.loadTexture( star.texture ) } );
            }else{
                materials = new THREE.MeshLambertMaterial( { ambient: 0xffffff, map: THREE.ImageUtils.loadTexture( star.texture ) } );
            }

            starObject = new THREE.Mesh( new THREE.SphereGeometry(star.Radius,64,32), materials );
            starObject.position.set(star.position.x,star.position.y,star.position.z);
            scene.add( starObject );
            star.object = starObject;
            objects.push( starObject );

            var smileyShape = new THREE.Shape();
            smileyShape.moveTo( 0, 0 );
            smileyShape.arc( 0, 0, star.rotaionRadius, 0, Math.PI*2, false );
            var circlePoints = smileyShape.createPointsGeometry(20);
            var line = new THREE.Line( circlePoints, new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 2 } ) );
            scene.add( line );
        }

        var object = new THREE.AxisHelper();
        object.position.set( 0, 0, 0 );
        object.scale.x = object.scale.y = object.scale.z = 2;
        scene.add( object );

        renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
        renderer.setSize( window.innerWidth, window.innerHeight );

        container.innerHTML = "";

        container.appendChild( renderer.domElement );

        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        container.appendChild( stats.domElement );

        projector = new THREE.Projector();
        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
    }

    function onDocumentMouseUp( event ) {
        event.preventDefault();
        mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

        var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 );
        projector.unprojectVector( vector, camera );

        var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
        var intersects = ray.intersectObjects( objects );

        if ( intersects.length > 0 ) {

            SELECTED = intersects[ 0 ].object;
            var star;
            for(var i=0;i<starsArray.length;i++){
                eval("star = stars."+starsArray[i]+";");
                if(star.object == SELECTED){
                    alert(starsArray[i]+"\n"+star.desc+"\n"+SELECTED.position.x +"," + SELECTED.position.y + "," + SELECTED.position.z);
                    break;
                }
            }
        }
    }

    function animate() {

        requestAnimationFrame( animate );

        render();
        stats.update();

    }

    function render() {

        var delta = clock.getDelta(),
                time = clock.getElapsedTime() * 10;

        controls.update( delta );
        var star;
        for(var i=0;i<starsArray.length;i++){
            eval("star = stars."+starsArray[i]+";");
            //var theta =  time % 1000 / 1000 * 2 *3.1415926;
            var rotationTheta = 2 * 3.1415926 / star.RotationTime * time ;
            var orbitTheta = 2 * 3.1415926 / star.OrbitTime * time / 24;
            var pos = star.object.position;
            pos.x = star.rotaionRadius * Math.cos(orbitTheta+star.InitAngle);
            pos.y = star.rotaionRadius * Math.sin(orbitTheta+star.InitAngle);
            star.object.position.set(pos.x,pos.y,pos.z);
            star.object.rotation.set(1.5, rotationTheta,0);
        }
        renderer.render( scene, camera );
    }

</script>

</body>
</html>

对比获取资源文件：

    var stars = {
        Sun:{OrbitTime:99999, RotationTime:99999, Radius:100, InitAngle:0, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016383.png", position:new THREE.Vector3(0, 0, 0),rotaionRadius : 0,desc:""},
        Mercury:{OrbitTime:87.969, RotationTime:1407.6, Radius:20, InitAngle:30, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016270.png", position:new THREE.Vector3(200, 0, 0),rotaionRadius : 500,desc:""},
        Venus:{OrbitTime:224.7, RotationTime:243 * 23.9, Radius:30, InitAngle:90, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016343.png", position:new THREE.Vector3(300, 0, 0),rotaionRadius : 600,desc:""},
        Earth:{OrbitTime:365.25636, RotationTime:23.9, Radius:50, InitAngle:120, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016015.png", position:new THREE.Vector3(400, 0, 0),rotaionRadius : 700,desc:""},
        Mars:{OrbitTime:687, RotationTime:24.6, Radius:25, InitAngle:250, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016017.png", position:new THREE.Vector3(500, 0, 0),rotaionRadius : 800,desc:""},
        Jupiter:{OrbitTime:11.86 * 365.25636, RotationTime:9.9, Radius:90, InitAngle:200, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016016.png", position:new THREE.Vector3(700, 0, 0),rotaionRadius : 900,desc:""},
        Saturn:{OrbitTime:29.5 * 365.25636, RotationTime:10.67, Radius:80, InitAngle:160, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016341.png", position:new THREE.Vector3(900, 0, 0),rotaionRadius : 1000,desc:""},
        Uranus:{OrbitTime:84 * 365.25636, RotationTime:15.6, Radius:60, InitAngle:270, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016342.png", position:new THREE.Vector3(1000, 0, 0),rotaionRadius : 1100,desc:""},
        Neptune:{OrbitTime:164.8 * 365.25636, RotationTime:18.4, Radius:55, InitAngle:60, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016271.png", position:new THREE.Vector3(1100, 0, 0),rotaionRadius : 1200,desc:""},
        Pluto:{OrbitTime:248 * 365.25636, RotationTime:6.38, Radius:10, InitAngle:150, texture:"http://derekliu.blog.51cto.com/attachment/201205/4479510_1336016271.png", position:new THREE.Vector3(1200, 0, 0),rotaionRadius : 1300,desc:""}
    };