three.js的3D模型渲染主要构成

引入three.js文件后，想要渲染出3D模型，必须要创建几个对象，分别为：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景

一、场景

创建一个场景：

const scene = new THREE.Scene();

二、相机

创建一个相机：

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

three.js中的几种相机：

Camera（摄像机）

OrthographicCamera（正交相机）

PerspectiveCamera（透视相机）

StereoCamera（立体相机）

CubeCamera（立方相机）

ArrayCamera（摄像机阵列）

在这里，我们使用的是PerspectiveCamera（透视摄像机）

第一个参数是视野角度（FOV），视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，单位为角度(与弧度区分开)。

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

接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。

三、渲染器

渲染器的作用是将制作的效果显示在网页中，十分重要

创建渲染器：

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

以上就是three.js 最重要的部分，之后会着重介绍其用法。