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、创建一个场景
<html>
<head>
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
canvas {
width: 100%;
height: 100%
}
</style>
</head>
<body>
<script src="./js/three.js-master/build/three.js"></script>
<script>
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);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var animate = function () {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
};
animate();
</script>
</body>
</html>
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（多边形网格）的物体的类。
