<!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. scala-04-set操作

    Scala Set(集合)是没有重复的对象集合,所有的元素都是唯一的. Scala 集合分为可变的和不可变的集合. 默认情况下,Scala 使用的是不可变集合,如果你想使用可变集合,需要引用 scal ...

  2. maven-compiler-plugin 指定jdk的版本和编码

    为了让maven的jdk编译版本一致, 使用maven-compiler-plugin插件来协助管理 建议新建maven项目后的第一步就是配置该插件 <build> <plugins ...

  3. 【K8S学习笔记】Part1：使用端口转发访问集群内的应用

    本文介绍如何使用kubectl port-forward命令连接K8S集群中运行的Redis服务.这种连接方式有助于数据库的调试工作. 注意:本文针对K8S的版本号为v1.9,其他版本可能会有少许不同 ...

  4. mongodb备份策略

    概述 数据库的备份非常非常非常重要!!!否则出问题连哭的机会有没有(欲哭无泪)今天主要是做一个mongodb的数据库备份. 1.关于备份 备份其实很简单,这里选择的是对mongodb中的某个库进行全备 ...

  5. Css相关用法个人总结

    Css相关用法个人总结

  6. 使用WPF教你一步一步实现连连看（三）

    这次首先对以前的结构进行了调整: 第一步:把MyButton按钮的属性独立成一个类,放在一个单独的MyButton.cs中,把图片的初始化也放到里面. 调整代码如下: public class MyB ...

  7. vue 教程

    1.安装 nodejs,检测 nodejs 环境(node -v). 2.安装vue-cli脚手架npm install vue-cli -g 3.在电脑的某个盘中创建项目,之后进入该项目. 4.初始 ...

  8. oracle逐步学习总结之权限和角色（基础六）

    原创作品,转自请注明出处:https://www.cnblogs.com/sunshine5683/p/10236129.html 继续上节的索引,这次主要总结oracle数据库的权限问题!(在总结的 ...

  9. Java 初级面试题及答案

    1.Java中的重载与重写有什么区别 重载(Overload)是让类以统一的方式处理不同类型数据的一种手段,实质表现就是多个具有不同的参数个数或者类型的同名函数(返回值类型可随意,不能以返回类型作为重 ...

  10. JAVA设计模式详解（五）----------适配器模式

    各位朋友好,本章节我们继续讲第五个设计模式. 在生活中,我们都知道手机内存卡是无法直接接电脑的,因为内存卡的卡槽比较小,而电脑只有USB插孔,此时我们需要用到读卡器.这个读卡器就相当于是适配器.这是生 ...