Three.js基本元素使用

一、Scene

场景能够让你在什么地方、摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方。

//创建一个场景
const scene = new THREE.Scene();
//场景背景色
scene.background = new THREE.Color(0xffffff);
//雾
scene.fog = new THREE.Fog(0xffffff, 0, 750);

二、camera

创建相机后都需要添加到场景中，scene.add(camera);

2.1透视相机（PerspectiveCamera）

这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。

const camera = new THREE.PerspectiveCamera(75, element.offsetWidth / element.offsetHeight, 1, 1000);
//设置摄像机的位置（x,y,z）
camera.position.set(0, 10, 0);

PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — 摄像机视锥体垂直视野角度
aspect — 摄像机视锥体长宽比
near — 摄像机视锥体近端面
far — 摄像机视锥体远端面

2.2正交相机（OrthographicCamera）

在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。 

三、WebGLRenderer渲染器

3.1构造函数：WebGLRenderer( parameters : Object )

parameters参数可选：

• antialias:抗锯齿，默认为false
• depth: 绘图缓存是否有一个至少6位的深度缓存。 默认是true

const renderer = new THREE.WebGLRenderer({ antialias: true });

3.1方法

setPixelRatio(value: number)设置设备像素比。通常用于避免HiDPI设备上绘图模糊

setSize(width : Integer, height : Integer, updateStyle : Boolean)将输出canvas的大小调整为(width, height)并考虑设备像素比,且将视口从(0, 0)开始调整到适合大小 将updateStyle设置为false以阻止对canvas的样式做任何改变。

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(element.offsetWidth, element.offsetHeight);

render( scene : Object3D, camera : Camera ）用相机渲染一个场景