<!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. Hadoop不适合处理实时数据的原因剖析

    1.概述 Hadoop已被公认为大数据分析领域无可争辩的王者,它专注与批处理.这种模型对许多情形(比如:为网页建立索引)已经足够,但还存在其他一些使用模型,它们需要来自高度动态的来源的实时信息.为了解 ...

  2. Django使用Signals监测model字段变化发送通知

    上一篇文章<运维效率之数据迁移自动化>中讲到了工单通知,本文将介绍工单通知实现过程中的一些小技巧.所有演示均基于Django2.0 阅读此篇文章你可以: 解锁一个python if的使用新 ...

  3. Spring Boot使用JWT实现系统登录验证

    简介 什么是JWT(Json Web Token) jwt是为了在网络应用环境间传递声明而执行的一种基于json的开放标准.该token被设计紧凑且安全的,特别适用于SSO场景.jwt的声明一般被用来 ...

  4. spring boot实现ssm(2)功能

    spring 和 mybatis 整合的那篇: ssm(2) . 配置文件比ssm(1) 更多, 在做项目的时候, 配置文件是一个让人头大的事情. 那么在spring boot中, 实现相同功能, 需 ...

  5. Percona XtraDB Cluster

    简介 Percona XtraDB Cluster是MySQL高可用性和可扩展性的解决方案,Percona XtraDB Cluster提供的特性如下: 1.同步复制,事务要么在所有节点提交或不提交. ...

  6. SSH-公私钥认证

    Linux下SSH的认证方式有两种,即密码认证和公私钥认证. 我们在日常的安全维护中,出于安全的考虑,密码不明文存放,会使用公私钥认证方式.这个时候我们就需要使用ssh-keygen,ssh-keyg ...

  7. elasticsearch安装ansj分词器

    1.概述    elasticsearch用于搜索引擎,需要设置一些分词器来优化索引.常用的有ik_max_word: 会将文本做最细粒度的拆分.ik_smart: 会做最粗粒度的拆分.ansj等. ...

  8. （转）mybatis数据库物理分页插件PageHelper

    以前使用ibatis/mybatis,都是自己手写sql语句进行物理分页,虽然稍微有点麻烦,但是都习惯了.最近试用了下mybatis的分页插件 PageHelper,感觉还不错吧.记录下其使用方法. ...

  9. es6学习笔记11--Proxy和Reflect

    Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程. Proxy可以理解成,在目标对象之前 ...

  10. string基本字符序列容器（竞赛时常用的使用方法总结）

    C语言只提供了一个char类型用来处理字符,而对于字符串,只能通过字符串数组来处理,而C++STL提供了string基本字符序列容器来处理字符串,可以将其理解为字符串类,它提供了添加,删除,替换.查找 ...