Three.js 如何三维建模

Question

如果你想开发一款基于浏览器 Web 平台环境运行的一款三维建模软件，选择WebGL的一款三维引擎Three.js是可行的。

基于WebGL技术的三维建模软件

目前大多数三维建模软件都是基于OpenGL技术开发，运行在操作系统上，随着5G发展带来的网速提高和浏览器性能的提高，三维建模软件迁移到Web运行是必然的趋势，只是时间问题，下面对目前市场上基于WebGL技术开发的一些三维建模软件进行简单介绍。

Three.js editor

Threejs自身提供了一个建议的3D编辑器，不过并不是专门针对三维建模，能够插入常见的几何体，进行缩放平移旋转等操作，可以设置模型的材质颜色、贴图等信息。可以加载obj等格式的外部模型，相关源码可以参考Threejs-master/editor目录下面的代码，对于一个想开发三维建模软件的人还是很有参考意义的首选官方资料。

Threejs-master/editor目录下面的index.html文件可以直接打开，就可以使用Three.js editor编辑器，注意要搭建本地服务器，或者自动创建本地服务器的代码编辑器，或者最简单的方式直接使用火狐浏览器打开，也可以通过Three.js官网进入，或者通过链接https://threejs.org/editor/直接打开。

OnShape

OnShape是一款机械领域的三建模软件，如果你使用过机械工程师常用的SolidWorks等三维建模软件，那么你很容易理解和使用OnShape软件，该软件算是一个重量级的基于WebGL技术的三维建模软件了，毕竟OnShape对应的SolidWorks软件安装包动辄10来GB。

Three.js API

可以查看Three.js文档，可以看到有关三维建模的一些API，虽然Threejs提供了很多与2D、3D建模相关的命令，真正要开发一款复杂的三维软件，肯定是还是需要公司的WebGL工程师进行二次封装。

关于 Threejs 一些与三维建模相关的API介绍，可以关注本站发布的《Three.js视频教程》第七章：几何体对象、曲线、三维建模。

射线

学习三维建模肯定需要学习一些射线相关的知识，比如你点击选中一个三维模型然后进行旋转、平移和缩放等操作，这时候就需要用到射线相关知识，主是通过射线投射对象Raycaster实现，Raycaster底层封装了Threejs数学模块的射线Ray。这两部分内容可以学习Threejs教程的进阶部分和实战部分。