Three.js入门学习

Three.js是WebGL的框架之一，对于我们学习前端3D动画是一个非常好的帮助。

三大组件

在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);

场景

场景是所有物体的容器。

相机

相机决定了场景中从那个角度的景色显示出来。场景只有一种，但是相机却有很多种。我们程序员只要设置不同的相机参数，就能让相机产生不一样的效果。
例如

• 透视相机

 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);

domElement元素表示渲染器中的画布，所有的渲染都是画在domElement上的，然后再appendChild将元素接入body，然后就可以在页面里面显示。

实时渲染

不停的对画面进行渲染，即使画面中没有任何改变，也需要重新渲染。

离线渲染

提前渲染