Three.js 和前端技术结合使用

Question

学习 Three.js 的群体有些是前端工程师，对前端知识很了解，有些是非前端出身，对前端了解很少。初学 three.js 对前端的要求并不高，只要对 HTML、CSS、JavaScript 知识简单学习即可。如果开发项目的话，作为 WebGL/Threejs 工程师对前端掌握程度肯定要和普通前端工程师一样，除非你的工作都是围绕底层图形学内容进行，这样的话对前端要求比较低。Web3D 项目都是运行在前端Web页面浏览器环境，WebGL 工程师需要和普通前端工程师一样写一些和 3D 场景交互前端UI组件，比如按钮、进度条、拖动条等等。

下面的阐述默认你对前端内容不是很了解。

如果你初次接触 WebGL 和 Threejs，对前端并不了解，建议你按照下面关键词顺序去百度了解。

关键词：HTML、CSS、JavaScript、jquery、vuejs、nodejs

原生 HTML/CSS/JavaScript

如果你没有前端基础，初次接触 WebGL/Threejs，如果有编程基础的话，建议你首先花费几天时间简单了解 HTML、CSS 和 JavaScript 基础知识。稍微有一些前端基础，就可以直接学习Threejs相关课程。

如果你想开发一个Web3D项目，肯定不能只是简单了解一下 HTML、CSS 和 JavaScript，需要深入学习 HTML、CSS 和 JavaScript，还需要学习 jquery、Nodejs、Vuejs 等相关知识。

jQuery 库

jQuery 是一个非常流行的操作 DOM 的库，相比较直接使用原生 JavaScript 要方便些，可以去了解下。

对于一个非常简单的 threejs 项目，你可以使用原生 HTML/CSS/JavaScript 去写UI界面，如果为了更加方便可以使用jquery.js前端库。

前端框架 vuejs

随着前端项目越来越多复杂，交互性越来越强，使用前端框架进行开发势在必行，Vuejs是国内应用比较广泛的框架之一，类似的前端框架还有Angular和React。在Threejs项目中使用哪一个，你可能会思考，个人感觉你熟悉哪个或者说公司用的哪个就使用哪个前端框架。如果你都不了解的话，建议先学习vuejs，先对前端框架有一定的认识，使用vuejs等前端框架相比较使用jquery更适用于大型项目。

Nodejs

作为一个前端工程师或者说 WebGL/Threejs 工程师，肯定要对 nodejs 有一定的了解，比如通过 Nodejs 搭建一个本地服务器，通过 Nodejs 写一个项目的开发环境。

UI 组件

使用 Threejs 开发项目的时候，你可能需要写一些前端组件，比如按钮、进度条等。你可以不借助库或框架，直接使用原生 HTML/CSS/JavaScript 去写，也可以找一些开源UI组件库，比如基于 vuejs 框架的UI组件库element-ui。