Three.js实现太阳系八大行星的自转公转

一. Three.js框架简介

Three.js是用javascript编写的WebGL第三方库，运用three.js框架写3D程序，就如同在现实生活中观察一个3D场景一样，让人置身其中。介绍three.js必须提到它的三大组件,Scene,Camera,Render。它们是整个框架的基础，有了这三个组件才能将物体渲染到网页上，实现整个场景的搭建。

场景(scene)

顾名思义，就是用来放置所有的元素。

var scene = new THREE.Scene();  //建立场景
复制代码

相机(camera)

相机，我们要在哪个位置，如何去看这些元素。 相机分为多种，不展开介绍，这里我们使用的是 透视相机。

var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000); //设置相机为 角度60度，宽高比，最近端Z轴为1,最远端Z轴为10000
复制代码

我们可以通过一张来自three.js文档中的图片来了解这些属性

渲染器(render)

当把场景中的所有内容准备好后，就可以对场景进行渲染，表示我们怎样来绘制这些元素。 渲染器也分为多种，这里使用的是WebGLRenderer;

var renderer = new THREE.WebGLRenderer();
复制代码

具体步骤：建立元素->定义相机->搭建场景->将元素和相机放入场景中->渲染场景 具体代码我们会在后面介绍，然后让我们先瞅一眼效果图。

二. 基本初始化

这里直接在CDN上引入three.js <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script>

注：因为某些行星的大小，转速，距离差距过大，所以进行了一些不平衡调整。 下面将一一分析这些元素是如何放入的。

1.canvas

我们没有把场景直接挂载到body中，而是在body中放置了一个canvas画布，在其上显示。