小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

场景

3d开发的时候，我们首先需要一个场景，如下：

var scene = new THREE.Scene();

相机

在Threejs中相机的表示是THREE.Camera，它是相机的抽象基类，其子类有两种相机，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。

var camera = new THREE.PerspectiveCamera( 75, width / height, 0.1, 1000 );

第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是角度单位。

第二个参数是长宽比（aspect ratio）。也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。

接下来的两个参数是近截面（near）和远截面（far）。当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。

渲染器

var renderer = new THREE.WebGLRenderer();
或
var renderer = new THREE.WebGLRenderer({
    antialias: true, //表示是否开启反锯齿
    alpha: true, //表示是否可以设置背景色透明
    precision: 'highp', // highp|mediump|lowp 表示着色精度选择
    premultipliedAlpha: false, //表示是否可以设置像素深度（用来度量图像的分辨率）
    preserveDrawingBuffer: true, //表示是否保存绘图缓冲
    maxLights: 3, //最大灯光数
    stencil: false //表示是否使用模板字体或图案
});

我们还需要准备画布的大小：

renderer.setSize( width, height );

然后把场景canvas添加到dom元素中：

document.querySelector(获取dom标签).appendChild(renderer.domElement);

总结

我们需要注意相机的设置。

3D场景的初始化

场景

相机

渲染器

总结