献给读者，我起这个标题绝对不是想着靠标题给大家吸引进来给我引流加阅读量什么的，我总结看了一遍掘金所有ThreeJS的入门文章，发现大家很多都是写的给自己看的文章，偏向于让所有人都能看懂的部分还是少了。如果说这篇文章确实对您有帮助您可以点赞支持下我产出更多优秀内容。如果说确实存在需要改进的地方您可以在评论区留下宝贵的意见。我一定认真学习，认真改进

封面是金克斯，我本人是英雄联盟-黑色玫瑰-铂金段位的AD玩家，金克斯是我非常拿手的英雄了【但是我的本命AD绝对是女警凯瑟琳】，她同时也是我们这个系列的主角。这整个系列都是围绕双城之战来编写，虽然技术文章围绕游戏的人物线来写有点不合适，在某种意义上，不过这也是为您的学习添加了一点趣味性不是嘛，我的游戏id是GeogreHotz,如果您手痒了想打吧游戏的话可以来黑色玫瑰找我，能吧前面的内容都读完来到番外偏的话我是非常欣慰的,因为在某种意义上我的写作水平并不好，甚至可能说的上算是有点糟糕。您能够将我的文章都读下去就已经是对我最大的支持了，番外篇的话会对前面学习的地方做一些细节性的补充。所以希望能像前面一样也能够对您有所帮助。

浏览器支持（Browser support）

总览

在所有现代浏览器中，Three.js可以使用WebGL来渲染场景。对于较旧的浏览器，特别是Internet Explorer 10或者更低版本浏览器，你将需要回落到其它renderers（CSS2DRenderer、CSS3DRenderer、SVGRenderer）。此外，你或许不得不包含一些额外的“填充物”来解决兼容性问题，特别是当你使用/examples目录中的文件时。注意：如果你并不需要支持较旧的浏览器，那就不推荐使用其他渲染器来进行渲染，因为与WebGLRenderer相比，其它渲染器渲染较慢，并且不支持WebGL的诸多特性。

支持WebGL的浏览器

Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge。你可以点击Can I use WebGL来查阅各个浏览器对WebGL的支持性。

在Three.js中所使用到的JavaScript语言特性或者Web API

这里是一些在Three.js中使用到的特性，其中的一部分需要额外的“填充物”（Polyfills）来解决兼容性问题。

特性	适用范围	模块
Typed Arrays	Source	BufferAttribute, BufferGeometry, etc.
Web Audio API	Source	Audio, AudioContext, AudioListener, etc.
WebVR API	Source	WebVRManager, etc.
Blob	Source	FileLoader, etc.
Promise	Examples	GLTFLoader, GLTFExporter, WebVR, VREffect, etc.
Fetch	Examples	ImageBitmapLoader, etc.
File API	Examples	GLTFExporter, etc.
URL API	Examples	GLTFLoader, etc.
Pointer Lock API	Examples	PointerLockControls

关于用于解决兼容性问题的“填充物”

根据你的需求，引入相关的“填充物”即可。以IE9为例，你至少需要来使用“填充物”完成以下的功能。

Typed Arrays
Blob

建议的“填充物”

WebGL兼容性检查（WebGL compatibility check）

虽然这个问题现在已经变得越来不明显，但不可否定的是，某些设备以及浏览器直到现在仍然不支持WebGL。
以下的方法可以帮助你检测当前用户所使用的环境是否支持WebGL，如果不支持，将会向用户提示一条信息。

请将github.com/mrdoob/thre…引入到你的文件，并在尝试开始渲染之前先运行该文件。

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

参考文献

ThreeJS中文网：Three.js中文网 (webgl3d.cn)

ThreeJS掘金最通俗入门教程-番外-细节把握,文心雕龙

目录