<!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. 本机spark 消费kafka失败（无法连接）

    本机spark 消费kafka失败(无法连接) 终端也不报错 就特么不消费:  但是用console的consumer  却可以 经过各种改版本 ,测试配置,最后发现 只要注释掉 kafka 配置se ...

  2. Intellij IDEA Spring Boot 项目Debug模式启动缓慢问题

    问题 Intellij IDEA Spring Boot 项目Debug模式启动缓慢 环境 os: windows10 idea :2018.1 解决方法 去除所有断点就正常了,很诡异,原因未知.

  3. 垃圾回收（GC）相关算法笔记

    GC需要完成的3件事情: 哪些内存需要回收? 什么时候回收? 如何回收? 引用计数算法 给对象中添维护一个计数器,每当引用这个对象时,计数器加1:当引用失效时,计数器值减1:当计数器值为0时,表示这个 ...

  4. 如何替代即将淘汰的Flash方案？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由MarsBoy发表于云+社区专栏 | 导语 Web技术飞速发展的如今,我们在感受新技术带来的便捷和喜悦的同时,也时常在考虑着一个问题: ...

  5. 程序员必知的8大排序(三)-------冒泡排序，快速排序（java实现）

    程序员必知的8大排序(一)-------直接插入排序,希尔排序(java实现) 程序员必知的8大排序(二)-------简单选择排序,堆排序(java实现) 程序员必知的8大排序(三)-------冒 ...

  6. Tomcat专题

    1. 修改端口 tomcat-7.0.70/conf/server.xml <Connector port=" protocol="HTTP/1.1"

  7. 在Bootstrap框架中，form-control的效果

    在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2. ...

  8. es6学习笔记7--Set

    Set 基本用法 ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2, ...

  9. 嵌入式Linux安装Dropbear SSH server

    0. 背景 OpenSSH因为其相对较大,一般不太适用于嵌入式平台,多用于PC或者服务器的Linux版本中. Dropbear是一个相对较小的SSH服务器和客户端.它运行在一个基于POSIX的各种平台 ...

  10. CSS设置table下tbody滚动条与thead对齐的方法

    <style>table tbody {display:block;height:195px;overflow-y:scroll;} table thead, tbody tr {disp ...