<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ceshi</title>

    <script type="text/javascript" src=".\build\three.js"></script>

    <script src=".\examples\js\controls\TrackballControls.js"></script>

    <script src=".\examples\js\controls\DragControls.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轴方向。

【three.js练习程序】创建太阳系的更多相关文章

  1. 在 Web 应用中创建 Node.js 应用程序

    本分步指南将通过 Azure Web 应用帮助您启动并运行示例 Node.JS 应用程序.除 Node.JS 外,Azure Web 应用还支持其他语言,如 PHP..NET.Node.JS.Pyth ...

  2. 用chrome的snippets片段功能创建页面js外挂程序，从控制台创建js小脚本

    用chrome的snippets片段功能创建页面js外挂程序,从控制台创建js小脚本 Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.可以访问和从 ...

  3. nw.js桌面程序自动更新（node.js表白记）

    Hello Google Node.js 一个基于Google V8 的JavaScript引擎. 一个伟大的端至端语言,或许我对你的热爱源自于web这门极富情感的技术吧! 注: 光阴似水,人生若梦, ...

  4. 【翻译】在Ext JS应用程序中构建可维护的控制器

    原文:Building Maintainable Controllers in Ext JS Apps 你好You Had Me 你是Tearing Me Apart 模板We Dont Need t ...

  5. 微信小程序入门笔记-小程序创建（2）

    1.工具下载 官方链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 我选用的是稳定版 macOS 2 ...

  6. Js倒计时程序

    Js倒计时程序 点击下载

  7. [渣译文] 使用 MVC 5 的 EF6 Code First 入门 系列：为ASP.NET MVC应用程序创建更复杂的数据模型

    这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译,这里是第六篇:为ASP.NET MVC应用程序 ...

  8. 使用java 程序创建格式为utf-8文件的方法(写入和读取json文件)

    使用java 程序创建格式为utf-8文件的方法:  try{            File file=new   File("C:/11.jsp");              ...

  9. Xamarin iOS编写第一个应用程序创建工程

    Xamarin iOS编写第一个应用程序创建工程 在Xcode以及Xamarin安装好后,就可以在Xamarin Studio中编写程序了.本节将主要讲解在Xamarin Studio中如何进行工程的 ...

  10. 编程第一个Apple Watch程序创建项目

    编程第一个Apple Watch程序创建项目 2.4  编程第一个程序 本节将通过编写第一个程序,为开发者讲解如何添加Watch应用对象.运行程序.界面设计.编写代码等内容本文选自Apple Watc ...

随机推荐

  1. Mysql的优化一则

    目的在于这么一个sql语句: SELECT w.* FROM wallpaper w inner join wallpaper_category_relation r ON w.wallpaper_i ...

  2. Jmeter测试Mysql数据库-入门篇

    一.jmter配置数据库 1.在配置jmter之前需要先安装数据库连接池驱动,进入到官方下载页面https://dev.mysql.com/downloads/connector/j/,下载对应的驱动 ...

  3. Xcode中的Vim--XVim

    相信大家在开始使用一门编程语言的时候,最先做的事就是去学习它对应的IDE.在你稍微进阶的时候,就会想着去学习IDE中的各种快捷键,比如 如何删除整行 如何在不使用鼠标的情况下,在代码间快速移动.跳转 ...

  4. 测试本地node包

    @subject: 测试本地node包 @author: leinov @date: 2018-10-25 当我们编写一个node包,在发布到npm上之前,需要在本地测试该包.假设我们有一个已经编写好 ...

  5. [转]magento2项目上线注意事项 切换到产品模式

    本文转自:https://segmentfault.com/a/1190000007929783 切换到产品模式 php magento deploy:mode:set production 执行以上 ...

  6. ASP.NET MVC获取上传的路径

    刚才有网友问及,怎样获取<input type='file'>的值? Insus.NET测试了一下,在Inetnet Explor之下似乎没有问题,但是FireFox获取到的只是文件名. ...

  7. MVC实现删除数据库记录

    本次MVC练习,我们想实现对数据库的记录进行删除.在网页的记录列表上,点击删除,将带到另外一个详细页面,显示详细的信息,让用户对删除的信息进行确认,再点击删除动作.不管怎样,得先在数据库创建一个删除的 ...

  8. 《码出高效 Java开发手册》第二章 面向对象

    码云地址: https://gitee.com/forxiaoming/JavaBaseCode/tree/master/EasyCoding 第2章 面向对象 Object-Oriented Pro ...

  9. Fibonacci（矩阵）

    Fibonacci Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u   Descrip ...

  10. Vue：v-on自定义事件

    Vue中父组件使用prop向子组件传递数据,那么子组件向父组件使用什么方式传递信息:自定义事件. 1.先来看官网上面教程 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName)  ...