three.js库学习（一）

three.js官网Three.js中文网 (webgl3d.cn)笔记学习记录
近期在做VR视觉3D模型渲染，因而需要进行three.js的库学习，新建个文集做下笔记，为了后期工作上便于翻阅。

1、首先导入three.js库文件

官方文档提供了压缩文件的下载链接：https://github.com/mrdoob/three.js/archive/master.zip

• 下载完成后会有一个three.js-master.zip的压缩包，解压这个压缩包之后

  
  
  目录结构.png

• 我们需要导入的包是在build目录下的文件，一个是three.js另一个是three.min.js，这两个文件一个是压缩过的另外一个是没有压缩过的。Docs目录是three.js的帮助文档，我们可以双击目录里的Index.html打开这个帮助文档。Editor目录里是一个网页版的3D编辑程序，你可以用它来构建three.js的场景。Examples目录里边有很多的示例代码。src目录是three.js的源代码的目录，里面是所有源代码。Utils目录存放了一些three.js开发过程中一些需要用到的工具。bower.json是包管理工具bower用的文件。

• 同时导入的方式也可以是模块引入(具体如下)：

• npm安装：
  npm install three

• 导入模块：
  在webpack或者Browserify等通过打包所有依赖，在浏览器中使用require('modules')的打包工具对你的文件进行打包。

1、require()引入

var THREE = require('three');

var scene = new THREE.Scene();

2、ES6 import引入

import * as THREE from 'three';

const scene = new THREE.Scene();

或
import { Scene } from 'three';

const scene = new Scene();

2、创建一个场景

3、场景对象介绍

想要利用three.js显示对应的场景需要几个对象：场景、相机、以及渲染器，这样便可以通过摄像机渲染出场景。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

相关属性对象的解释：

• PerspectiveCamera（透视摄像机）：
  new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  第一个参数是视野角度，指在无论什么时候，所能在显示器上看到的场景的范围，也就是视野的一个角度。
  第二个参数是长宽比，指的物体的宽度除以它的高的比值。
  第三个参数是远剪切面，也就是说当物体所在的位置比摄像机的远剪切面远的时候，该物体超出的部分将不会被渲染到场景中。
  第四个参数是近剪切面，也就是说当物体所在的位置比摄像机的比近剪切面近的时候，该物体超出的部分将不会被渲染到场景中。
• renderer渲染器
  var renderer = new THREE.WebGLRenderer();创建一个渲染器，var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });指在去除掉背景色renderer.setSize(window.innerWidth / 2, window.innerHeight / 2);在我们的应用程序里设置一个渲染器的大小尺寸。比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程序。因此，我们可以将渲染器宽高设置为浏览器窗口宽高。对于性能比较敏感的应用程序来说，你可以给setSize传入一个较小的值，例如window.innerWidth/2和window.innerHeight/2，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。
• oxGeometry：四边形的原始几何类
  var geometry = new THREE.BoxGeometry(1, 1, 1);BoxGeometry是四边形的原始几何类，它通常使用构造函数所提供的“width”、“height”、“depth”参数来创建立方体或者不规则四边形。
• MeshBasicMaterial：基础网格材质

var material = new THREE.MeshBasicMaterial({
     color: 0x00ff00
});

一个以简单着色（平面或线框）方式来绘制几何体的材质。

• Mesh：网格
  new THREE.Mesh(geometry, material)网格表示基于以三角形为polygon mesh（多边形网格）的物体的类。