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 ); // setSize 
document.body.appendChild( renderer.domElement );

PerspectiveCamera 场景

现在已经设置好了场景，相机，渲染器。 three  有几个不同的渲染器， 我们使用 PerspectiveCamera.

1. 第一个属性是视野， FOV 是任何给定时刻显示器上看到的场景的范围。该值以度为单位。

2. 第二个是设置宽高，

3. 第三个属性与第四个属性是近和远裁剪平面。这意味着，远离相机和物体远远超过或接近近处的物体不会被渲染，

WebGLRenderer 渲染器

 除了 webGLRenderer 之外 还有其他一些功能，通常用作旧版浏览器的用户的回退功能，或者由于某些原因而无法支持 WebGL 的用户。

添加到页面

我们将 renderer 元素添加到 HTML 文档中。这是渲染器用来向我们显示场景的 <canvas> 元素。

setSize 

除了创建渲染器实例外，设置 程序显示的实际大小，如果想保持应用程序的大小，但以较低的分辨率渲染它，可以通过 false 作为 updateStyle （第三个参数）调用 setSize 来实现，例如 setSize(window.innerWidth / 2, window.innerHeight / 2, false)