threejs可视化快速入门指北（附3D资源导航）

前言

当你开始思考你应该如何学习WebGL和Three.js的时候，相信你至少对相关的关键词了解过了，希望通过WebGL或Three.js实现你想要的Web3D功能，也许你也会去思考通过WebGL或Three.js能不能实现你想要的功能，也许你是因为领导临时分配任务，还不太清楚WebGL和Three.js是什么，个人建议是不要做过多思考，先看看相关的具体技术教程，随着时间的推移你自然会明白Canvas、WebGL、Three.js等关键词指什么。

Three.js是基于原生WebGL API和着色器封装得到的3D引擎，也就是一个JS库。通过原生WebGL直接编写程序，会比较麻烦，一般开发项目直接使用Three.js引擎。简单的项目一般也用不到底层WebGL知识，不过学习WebGL有助于深入理解Three.js，如果使用Three.js开发项目需要自定义着色器的时候，肯定也是要学习底层WebGL和着色器GLSL知识。

总而言之，如果你想成为Web3D应用开发的大牛，学习WebGL肯定是必须的。

3D资源导航（完善中）：https://54web3.cc/

什么是Web3D

当今的互联网已经迈入了第三代，这被称为Web3.0，而Web3D正是Web3.0的其中一个技术分支。Web3D是指将三维图形技术应用于Web上的技术，它是将3D图形和Web技术结合起来的一个分支，可以使用户在Web上以更真实、更直观的方式浏览和操作虚拟场景。

Web3D是一种利用Web技术创建和展示3D场景和模型的技术。Web3D技术让用户可以通过Web浏览器直接访问和浏览3D内容，无需安装任何额外的插件或软件。Web3D技术通常使用HTML、CSS、JavaScript等Web标准技术进行开发，并使用各种3D引擎和库来实现3D渲染、交互和动画等功能。

Web3D技术的优势在于可以在不同平台和设备上运行，包括桌面、移动设备和虚拟现实设备等，用户可以随时随地访问3D内容。Web3D技术还可以帮助用户更好地展示和交互3D模型和场景，包括3D游戏、虚拟展览、3D酷炫官网、产品演示、建筑模型、元宇宙场景、智慧城市、智慧工厂、数字孪生、低代码3D平台等。

目前，Web3D技术已经得到广泛应用，包括WebGL、Three.js、Babylon.js等3D引擎和库，以及A-Frame、PlayCanvas等Web3D框架。

如何学习3D技术

WebGL和Three.js学习顺序

如果你急于要实现一个Web3D功能，时间有限，也没有图形学基础，个人建议直接学习先Three.js即可，以后想深入掌握，可以学习原生WebGL和图形学相关知识。

如果时间比较充足，又希望有更大的成长空间，学习底层原生WebGL肯定是必要的，可以WebGL和Threejs结合着学习，顺序也不是非常重要。

前端工程师

如果你是前端工程师，突然接触到Web3D应用开发，对于你来说，前端的生态肯定是非常熟悉了，如果不了解WebGL和3D应用开发这一块，这种情况下，需要学习的自然是底层WebGL知识和Three.js基础知识，还有实战中不同Web3D应用项目，如何去开发，程序员和3D美术之间又应该如何配合，需要去学习实战项目的开发流程。

没有编程基础

如果你首次接触WebGL或Three.js，没有任何编程基础，只要学习能力强，学习是没有问题的，很多时候学习能力比你的基础更为重要。

没有编程基础首先要做的是建立编程的感觉，WebGL开发使用的是JavaScript语言，自然需要找一些基础的JavaScript语言教程学习一下，然后简单补充下HTML和CSS知识，再去学习Three.js课程。

有编程基础-不了解前端

部分初学者，有编程基础，但是不了解前端，这种情况下你肯定首先需要补充的是HTML、CSS、JavaScript等前端知识，然后在学习Threejs和WebGL。刚开始学习Threejs和WebGL对前端要求不高，稍微有点基础即可，但是如果为了开发项目，对前端的要求和普通前端一样，需要掌握JavaScript、HTML、CSS、http、reactjs、vuejs、nodejs等知识。

语言基础必备

• JavaScript 基础教程

《JavaScript 语言入门教程》：https://wangdoc.com/javascript/

• JavaScript ES6 教程

《ES6 标准入门》：https://wangdoc.com/es6/

• HTML 基础教程

《HTML 超文本标记语言入门教程》：https://www.runoob.com/html/html-tutorial.html

• CSS 基础教程

《CSS 层叠样式表入门教程》：https://www.runoob.com/css/css-tutorial.html

• TypeScript 基础教程

《TypeScript中文手册》：https://www.tslang.cn