• 【three.js练习程序】创建太阳系


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ceshi</title>
        <script type="text/javascript" src=".uild	hree.js"></script>
        <script src=".examplesjscontrolsTrackballControls.js"></script>
        <script src=".examplesjscontrolsDragControls.js"></script>
        <style>
            body {
                margin: 0;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <!-- 作为Three.js渲染器输出元素 -->
        <div id="WebGL-output">
    
        </div>
    
        <!-- 第一个 Three.js 样例代码 -->
        <script type="text/javascript">
    
            var dis = [0.38, 0.72, 1, 1.52, 5.2, 9.54, 19.218, 30.06];    //太阳距离
            var radius = [2440, 6052, 6378, 3397, 71472, 60268, 25559, 24764];  //行星半径
            var camera, scene, renderer;
            var sphere = new Array(8);
            var startStep = [0,0,0,0,0,0,0,0];
            var step = [87.7, 224.70, 365.25, 686.98, 4332.71, 10759.5, 30685, 60190];  //公转参数
            var stepZi = [58.65,-243.01,1,1.026,0.426,0.41,0.426,0.658];     //自转参数
            var controls;
            var objects = [];
    
            var fov = 45;
            var near = 0.1;
            var far = 10000000;
            init();
            render();
    
            function init() {
    
                scene = new THREE.Scene();      //创建场景
    
                camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);   //创建摄像机
                camera.position.x = 100;
                camera.position.y = 100;
                camera.position.z = 100;
                camera.lookAt(scene.position);
    
                renderer = new THREE.WebGLRenderer({
                    antialias: true,
                    alpha: true
                });                    //创建一个WebGL渲染器并设置其大小
                renderer.setClearColor(new THREE.Color("#000000"));
                renderer.shadowMapEnabled = true;
                renderer.setSize(window.innerWidth, window.innerHeight);
    
                var ambientLight = new THREE.AmbientLight("#ffffff");       //加入场景光
                scene.add(ambientLight);
    
                var axes = new THREE.AxisHelper(200);               //创建三轴表示
                scene.add(axes);
    
                controls = new THREE.TrackballControls(camera);     //创建场景旋转缩放事件
                controls.rotateSpeed = 2.5;
                controls.zoomSpeed = 1.2;
                controls.panSpeed = 0.8;
                controls.noZoom = false;
                controls.noPan = false;
                controls.staticMoving = true;
                controls.dynamicDampingFactor = 0.3;
    
    
                var pointColor = "#ffffff";
                // 增加方向光光源,模拟太阳
                var spotLight = new THREE.DirectionalLight(pointColor);
                spotLight.position.set(0, 0, 0);
                scene.add(spotLight);
    
                //增加太阳炫光
                var textureFlare0 = THREE.ImageUtils.loadTexture("./examples/textures/lensflare/lensflare0.png");
                var textureFlare3 = THREE.ImageUtils.loadTexture("./examples/textures/lensflare/lensflare3.png");
    
                var flareColor = new THREE.Color(0xffffff);
                var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor);
    
                lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);
                lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);
                lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);
                lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);
    
                lensFlare.position.copy(spotLight.position);
                scene.add(lensFlare);
    
    
                //生成八大行星
                for (var i = 0; i < 8; i++) {
                    sphere = createMesh(new THREE.SphereGeometry(radius[i] / 100, 100, 100), "./planet/planet2/" + (i + 1) + ".jpg");
                    sphere.position.x = dis[i] * 500;
                    sphere.position.y = 0;
                    sphere.position.z = dis[i] * 500;
                    scene.add(sphere);
                    objects.push(sphere);
                }
    
                window.addEventListener('resize', onWindowResize, false);
            }
    
            function createMesh(geom, imageFile) {
                var texture = THREE.ImageUtils.loadTexture(imageFile);
                var mat = new THREE.MeshPhongMaterial({ map: texture });
                var mesh = new THREE.Mesh(geom, mat);
                return mesh;
            }
    
            function onWindowResize() {
    
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
    
                renderer.setSize(window.innerWidth, window.innerHeight);
    
            }
    
            function render() {
                requestAnimationFrame(render);
    
                for (var i = 0; i < 8; i++)
                {
                    objects[i].position.x = dis[i] * 500 * Math.cos(startStep[i]);
                    objects[i].position.z = dis[i] * 500 * Math.sin(startStep[i]);
                    startStep[i] -= 3.1415926535897932384626433832795 * 2 / step[i];
    
                    if (startStep[i] <= -6.28)
                    {
                        startStep[i] = 0;
                    }
    
                    objects[i].rotation.y = objects[i].rotation.y + 1 / (stepZi[i]*3.1415926535897932384626433832795 * 2);
    
                    if(objects[i].rotation.y >=6.28)
                    {
                        objects[i].rotation.y = 0;
                    }
                }
    
                controls.update();
                sphere.material.map.needsUpdate = true;
                renderer.render(scene, camera);
            }
    
            document.getElementById("WebGL-output").appendChild(renderer.domElement);
    
    
        </script>
    </body>
    </html>

    没考虑各大行星自转轴指向的问题,都是默认指向y轴方向。

  • 相关阅读:
    Spring Boot----freemark使用
    vue----解决跨域问题
    CSS----精灵图
    Spring MVC----文件上传
    Mybatis----Mybatis使用
    Django url引用异常
    Django ORM异常
    django sqlite3 报错问题
    爬虫 requests的超时和重试
    python 异常 NameError: name 'ModuleNotFoundError' is not defined
  • 原文地址:https://www.cnblogs.com/tiandsp/p/8452193.html
Copyright © 2020-2023  润新知