用Three.js搭建星系模型

发表于 |

快速上手Three.JS库

关于Three.JS

three.js是基于WebGL开发的一个3D视图引擎, 纯JS开发, 由于原WebGL的API设计对开发人员的数学要求极高(要懂什么变换矩阵, 高斯变换..), three.js在此基础上开发了清晰易懂的API, 使得Web端3D动画开发变得更加容易.

three.js的Github链接: https://github.com/mrdoob/three.js

Three.Js的官方文档 : https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene

相关书籍: 《Three.JS 开发指南》

初次上手

首先从three.js的GitHub地址下载整个项目, 解压并放在本地.

打开文件夹,找到three.js-master/build 目录下有一个 three.js文件,同时还会看到一个three.min.js文件,

three.js为开发者版本(未压缩), three.min.js为生产版本(压缩了近一半体积).

接下来, 在本地新建一个项目文件夹,新建index.html, 新建static/js文件夹

在index.html写下如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
	<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, 	  maximum-scale=1.0">
      <title>my first three.js app</title>
      <style type="text/css">
          body {
              font-family: Monospace;
              background-color: #f0f0f0;
              margin: 0px;
              overflow: hidden;
          }
      </style>
  	</head>
	<body>
      <script src="static/js/three.min.js" ></script>
      <script>
          //这里写three.js主要代码
      </script>
	</body>
</html>

此时一个基本的框架已经搭起来了,接下来主要在注释部分书写代码

此处添加一个基本初始化代码, 来自three.js的github说明 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var scene, camera, renderer;
var geometry, material, mesh;
init();
animate();
function init() {
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.z = 1000;
	geometry = new THREE.BoxGeometry( 200, 200, 200 );
	material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
}
function animate() {
	requestAnimationFrame( animate );
	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;
	renderer.render( scene, camera );
}

到这里, 一个完整的项目就搭来了, 此时你需要用浏览器打开index.html文件, 观察效果,

这里浏览器推荐google的chrome以及同样内核的CentBrowser, 如果看不到现象,请在设置

里面开启硬件加速, 如果还有问题请Google, 本人用的win10 x64, GT750M显卡, 由于操作

系统版本过低, 浏览器设置以及内核版本过低, 显卡驱动问题均会导致无法运行WebGL的情况出现,

请自行排查.

Three.js工程代码主要概念

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var scene, camera, renderer;
var geometry, material, mesh;
init();  //初始化代码
animate(); //动作代码
function init() {
	//初始化一个场景
	scene = new THREE.Scene();
    //初始化一个相机(观察者)
    //args: PerspectiveCamera( fov, aspect, near, far )
		//fov — 相机垂直视野(默认为50度)
		//aspect — 长宽比
		//near — Camera frustum near plane.
		//far — Camera frustum far plane.
	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );   
    //设置相机在Z轴的位置
	camera.position.z = 1000;
    //初始化一个立方体,长宽高均为200
	geometry = new THREE.BoxGeometry( 200, 200, 200 );
    //初始化一个Basic材质, 并将其颜色设为0xff0000
	material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
    //将立方体和材质啮合
	mesh = new THREE.Mesh( geometry, material );
	//在场景中添加该几何体
  	scene.add( mesh );
    //初始化一个WebGL渲染器
	renderer = new THREE.WebGLRenderer();
    //设定渲染大小
	renderer.setSize( window.innerWidth, window.innerHeight );
    //在HTML文档中添加一个子标签
	document.body.appendChild( renderer.domElement );
}
//动画函数
function animate() {
    //刷新动作函数, 1s 60帧
	requestAnimationFrame( animate );
    //同时旋转立方体的x,y轴
	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;
    //渲染场景和相机
	renderer.render( scene, camera );
}
0%