Threejs新手入门

简介

什么是Threejs呢，很简单，就是一个用来写3D程序的js，是JavaScript编写的WebGL第三方库。因为其是开源的，所以应该算是目前国内使用最广泛、资料最多的用于网页的三维引擎。

Threejs是一款基于WebGL的三维引擎，可以创建很多很多的场景。可以用于三维物体展示、播放3D动画等，还可以通过鼠标、键盘等输入设备与网页进行交互，让使用者有更好的用户体验。

WebGL兼容性检查

导入WebGL.js文件，开始渲染之前检测。

if (WEBGL.isWebGLAvailable()) {
    
    
    // Initiate function or other initializations here
    animate();
} else {
    
    
    var warning = WEBGL.getWebGLErrorMessage();
	document.body.appendChild(warning);
}

# WebGL2检测是否支持
if (WEBGL.isWebGL2Available() == false) {
    
    
    var warning = WEBGL.getWebGL2ErrorMessage();
	document.body.appendChild(warning);
}

组件

核心组件

场景

场景就相当于这个世界，可以容纳所有的元素，也就是我们熟知的虚拟世界，可以在场景中放置我们想摆放的所有东西。

摄像机

摄像机就相当于我们的眼睛，用来展示场景中我们能看到的所有东西。

相机用于控制3D空间展示的区域，分为正交摄像机和透视摄像机。

渲染器

渲染器是用来将摄像机照到的物体或者其他的一些元素，显示到网页上的。

其他组件

光源

光源就相当于现实中发光的物体，例如太阳、月亮等平行光源，还有白炽灯这样的点光源等。

加载器

加载器的作用主要是将各种各样的模型加载到场景之中。

Threejs提供了各种各样的加载器，类似于OBJLoader、FBXLoader等等。

模型

其实没有所谓的模型组件，这里是为了好讲述，所以加了一个模型组件，模型包含了集合体，Mesh，材质球多个方面，共同构成了一个场景中的物体。

尾语

Threejs中还有很多的组件，利于动画、音频等，这里就不一一赘述了。这里只对组件进行了简单的描述，后续有空了对各个组件进行详细的描述。

我是Threejs初学者，如果有写的不好的地方，请各位大佬批评指正。