<!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. Docker概念学习系列之Docker核心概念之仓库Repository

    不多说,直接上干货! Docker仓库 仓库(Repository)是集中存放镜像的地方,分公共仓库和私有仓库. 仓库是集中存放镜像文件的场所. 有时候会把仓库和仓库注册服务器(Registry)混为 ...

  2. DROP TABLE 恢复【一】

    当DROP TABLE指令敲下的时候,你很爽,你有考虑过后果么?如果该表真的没用,你DROP到无所谓,如果还有用的,这时你肯定吓惨了吧,如果你有备份,那么恭喜你,逃过一劫,如果没有备份呢?这时就该绝望 ...

  3. 数据库字典查询，从EF工具操作中提取的

    用户表: SELECT [Project1].[C1] AS [C1] , [Project1].[CatalogName] AS [CatalogName] , [Project1].[Schema ...

  4. 浅谈移动应用的跨平台开发工具（Xamarin和React Native）

    谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与 ...

  5. SpringMVC之@PathVariable 映射 URL 绑定的占位符

    @PathVariable 该注解可以将URL中占位符参数绑定到方法的参数上,及ULR中{xxx}可以通过@PathVariable("xxx")绑定到方法参数中. 测试类: @R ...

  6. GCD之Source

    参考:http://blog.csdn.net/lengshengren/article/details/12905811

  7. ASP.NET Repeater控件实现简单分页

    早上,有看MSDN,看到了 PagedDataSource 类 http://msdn.microsoft.com/zh-cn/library/system.web.ui.webcontrols.pa ...

  8. C#调用百度地图API经验分享（四）

    这一篇,记录一下我调用的地图API实现的功能.下面介绍的都是一些片段的节选,不能直接复制就运行.在实现之前肯定要加载地图,先放一个webbroser控件,然后如下: private void Form ...

  9. JavaSE 集合补充点(JDK1.9对集合添加的优化)

    通常,我们在代码中创建一个集合(例如,List 或 Set ),并直接用一些元素填充它. 实例化集合,几个 add方法调用,使得代码重复. public class Demo01 { public s ...

  10. Moon Game （凸四边形个数，数学题）

    Problem 2148 Moon Game Accept: 24    Submit: 61 Time Limit: 1000 mSec    Memory Limit : 32768 KB Pro ...