一. 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)
当把场景中的所有内容准备好后，就可以对场景进行渲染，表示我们怎样来绘制这些元素。
渲染器也分为多种，这里使用的是;
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画布，在其上显示。
2.背景
我们没有做3D的旋转背景，而是直接放了一张背景图作为小太阳系的背景。这张背景图是直接在canvas中放置的。
<canvas></canvas> renderer = new THREE.WebGLRenderer({ //定义渲染器 alpha: true, //让背景透明,默认是黑色，以显示我们自己的背景图 }); renderer.setClearAlpha(0); //css文件 #webglcanvas { background: url(./images/bg4.jpg) no-repeat; background-size: cover; }
但如果只是这样简单的操作是没有用的，因为在添加渲染器后，会默认添加一个背景颜色为黑色。所以要在渲染器中设置它的alpha属性()，让背景透明，以显示我们自己的背景图
3.定义基本组件
定义场景
scene = new THREE.Scene(), //建立场景
定义照相机位置
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1,10000); //设置相机为 角度60度，宽高比，最近端Z轴为1,最远端Z轴为10000 camera.position.z = 2000; //调整相机位置 camera.position.y = 500;
建立一个组
组可以看作是一些元素的容器，将某些有共同特征的元素放在一个组里。
group = new THREE.Group(), //建立一个组
我会在第三节解释为什么要建立额外16个组。
//下面这些组用来建立每个星球的父元素,以实现 八大行星不同速度的公转与自转 var group1 = new THREE.Group(); groupParent1 = new THREE.Group(); group2 = new THREE.Group(); groupParent2 = new THREE.Group(); group3 = new THREE.Group(); groupParent3 = new THREE.Group(); group4 = new THREE.Group(); groupParent4 = new THREE.Group(); group5 = new THREE.Group(); groupParent5 = new THREE.Group(); group6 = new THREE.Group(); groupParent6 = new THREE.Group(); group7 = new THREE.Group(); groupParent7 = new THREE.Group(); group8 = new THREE.Group(); groupParent8 = new THREE.Group();
定义渲染器
WebGLRenderer中有一个用来绘制输出的canvas对象,现在获取设置的canvas放入我们渲染器中的canvas对象中
var canvas = document.getElementById('webglcanvas'), renderer = new THREE.WebGLRenderer({ //定义渲染器 alpha: true, //让背景透明,默认是黑色 以显示我们自己的背景图 canvas: canvas, //一个用来绘制输出的Canvas对象 antialias: true //抗锯齿 }); renderer.setSize(window.innerWidth, window.innerHeight); //设置渲染器的宽高
4.初始化函数
在这个函数中进行一系列的初始化操作。
function init() { //用来初始化的函数 scene.add(group); //把组都添加到场景里 scene.add(groupParent1); scene.add(groupParent2); scene.add(groupParent3); scene.add(groupParent4); scene.add(groupParent5); scene.add(groupParent6); scene.add(groupParent7); scene.add(groupParent8); var loader = new THREE.TextureLoader();/*材质 纹理加载器*/ // 太阳 loader.load('./images/sun1.jpg', function (texture) { var geometry = new THREE.SphereGeometry(250, 20, 20) //球体模型 var material = new THREE.MeshBasicMaterial({ map: texture }) //材质 将图片解构成THREE能理解的材质 var mesh = new THREE.Mesh(geometry, material); //网孔对象 第一个参数是几何模型(结构),第二参数是材料(外观) group.add(mesh);//添加到组里 }) // 水星 loader.load('./images/water.jpg', function (texture) { var geometry = new THREE.SphereGeometry(25, 20, 20) //球型 var material = new THREE.MeshBasicMaterial({ map: texture }) //材质 将图片解构成THREE能理解的材质 var mesh = new THREE.Mesh(geometry, material); group1.position.x -= 300; group1.add(mesh); groupParent1.add(group1); }) //其它7颗行星参数因为太长了在这里就不给出了，但参数的设置原理都是一样的 }
简要解释一下：
var loader = new THREE.TextureLoader();是定义了一个。
var geometry = new THREE.SphereGeometry(250, 20, 20);建立一个，球体半径为250，水平分割面的数量20，垂直分割面的数量20。
var mesh = new THREE.Mesh(geometry, material);。