👋 和我一起学【Three.js】「初级篇」：0. 总论

「和我一起学 XXX」是我 2023 年的一个新企划    
    
    
，目的是向读者（也包括未来的自己）介绍我正在学习的某项新技术    
    
    。文章会通过长期反复迭代的方式保持其内容的新鲜度     


     


     


。文章有较大内容更新时


     


     


    ，会在文章开头进行更新时间说明（由于时间精力有限
 




 




 


，更新的内容只能保障少数几个平台的同步   

   

   

，请见谅）




 




 




。

1. 什么是 Three.js

Three.js 是一个基于 WebGL 的 3D JavaScript 开源库（遵循 MIT 协议） 

     

     

   ，它使 JavaScript 开发者能够更方便地在 Web 应用中创建 3D 场景
   

   

   。

请注意该定义的如下部分：

基于 WebGL：WebGL 是一种 3D 绘图协议

  




  




  

，对于开发者而言  


  


  


，它是一组更底层的绘图 API  
     
     
  ，它负责绘制点


   




   




   
，线与三角形 



 



 



，使用 WebGL 绘制复杂的 3D 场景              ，需要非常多的代码； 3D JavaScript 开源库：Three.js 基于非常宽松的 MIT 协议



    




    




    ，这意味着您可以自由使用














，修改 Three.js 代码创建商业应用； 更方便地：就像 jQuery 基于 JavaScript 提供了更友好地 API 使开发者能够轻松地操作 DOM 一样              ，Three.js 也封装出更友好地 API 供开发者绘制 3D 场景



     



     



     ，相较于使用 WebGL













，使用 Three.js 绘制 3D 场景需要的代码量要少的多得多     

     

     

。 3D 场景：它包含： 3D 游戏； 建筑设计和数据可视化看板； AR    
    
    
，VR； 虚拟展厅


     


     


    ，虚拟商品展示； 交互式展览
 




 




 


，培训等；

您可以在 Three.js 官网发现丰富的案例   

   

   

，它们从不同方面展示了 Three.js 的魅力和强大！

2. （我）为什么要学习 Three.js？

在了解 Three.js 是什么后 

     

     

   ，若选择继续学习

  




  




  

，想必您有自己的理由 




  




  




。对于我而言  


  


  


，学习 Three.js 的主要动机是「好玩」（Just for fun!）

  


  


  。

我觉得能够在显示器上渲染 3D 场景是件很酷的事情  
     
     
  ，特别是它还可以通过 VR 头显设备让人们身临其境体验到一个由我创造的虚拟世界！

无论您学习的动机是否与我相同


   




   




   
，都欢迎您和我一起持续探索 Web 3D 世界     
     
     
。我有信心带您一起踏入 3D 世界的大门！

3. 需要学习哪些内容？

在 Three.js 的官方文档中 



 



 



，您可以看到一个简单的 Three.js 应用包含了哪些模块：

您可以看到              ，图中包含了「渲染器(Renderer)」



    




    




    ，「场景(Scene)」














，「摄影机(Camera)」              ，「网状物(Mesh)」



     



     



     ，「3D 对象(Object3D)」













，「灯光(Light)」    
    
    
，「几何体 (Geometry)」


     


     


    ，「材质(Material)」和「纹理(Texture)」等元素
 




 




 


，如果您从未接触过 Web 3D 世界   

   

   

，您可能有点摸不着头脑  




   




   




。

但是别担心 

     

     

   ，通过阅读本系列文章

  




  




  

，您将能够掌握绝对大多数内容  


  


  


，并了解它们之间的关系


 



 



 。在往后的篇幅中  
     
     
  ，我将一一介绍这些名词并介绍它们对于构建 Web 3D 场景的意义所在


   




   




   
，以及您应该如何正确地使用它们               。通过完全掌握这些概念 



 



 



，您应该能够自己实现任意简单的 3D 场景   




    




    




。

我发现很多文章专注于介绍某种 3D 场景具体如何搭建              ，在本系列文章中



    




    




    ，我不会这么做














，我倾向于采用一种「自顶向下」的方法              ，让您理解到 Web 3D 世界的每个构成要素



     



     



     ，然后您便能通过自由组合这些要素













，搭建任意您感兴趣的 3D 场景













。

因此接下来    
    
    
，本系列文章将会分为如下几个部分向您介绍 Three.js 技术的基本元素：

⚠️ 文章具体内容可能会根据实际情况有所增减               。

3.1 搭建 Web 3D 场景

本章将介绍搭建 Web 3D 场景的必备要素（包含场景


     


     


    ，物体与动画）和基本原理
 




 




 


，通过本章的学习   

   

   

，您应该有能力开发出一个基本的 3D 场景 

     

     

   ，它类似于 Web 3D 世界的 Hello World

  




  




  

，标志您正式踏入 Web 3D 世界    



     



     



。

3.2 掌握几何体

本章将介绍 Three.js 提供的多个几何体元素以及它们的特性














。它们将是未来您构建的各类 3D 场景中的主角    
    
    。

3.3 掌握摄影机

摄影机的种类和位置不仅决定了我们观察 3D 世界的方式  


  


  


，也决定了物体的光影和色彩该如何被 GPU 渲染  
     
     
  ，本章我们将了解 Three.js 提供的摄影机种类以及如何操作它们     


     


     


。

3.4 掌握纹理

本章将介绍「纹理」这个概念


   




   




   
，您可以将他理解为「贴图」 



 



 



，通过恰当地使用纹理              ，您可以让您的几何体成为具象的现实物体




 




 




。

3.5 掌握材质

本章将介绍「材质」



    




    




    ，即讨论物体的每个可见像素应该被如何着色的问题














，通过掌握物体材质的设置方法              ，您的 3D 物体将会配合光影产生更加逼真的效果
   

   

   。

? 3.6 掌握光照（暂定）

通过掌握「纹理」和「材质」



     



     



     ，您能将您抽象的几何体具象化为具体的













，我们所熟悉的对象     

     

     

。但是要让这些对象更加符合人的认知    
    
    
，更加「真实」和「立体」


     


     


    ，实际上需要模拟现实的光照环境以及物体对光线的反应
 




 




 


，这是本章将要讨论的主题 




  




  




。

? 本章内容将根据其他已发布文章的阅读情况决定是否更新

  


  


  。当前不保证出现在系列中     
     
     
。

? 3.7 掌握阴影（暂定）

物体对光照的反应表现为物体的「阴影」和「投影」   

   

   

，Three.js 提供了简单但并不完美的方法让开发者能够让物体的阴影和投影尽可能贴近现实 

     

     

   ，本章中我们将深入了解其中的内容  




   




   




。

? 本章内容将根据其他已发布文章的阅读情况决定是否更新


 



 



 。当前不保证出现在系列中               。

以上

  




  




  

，是「和我一起学【Three.js】『初级篇』」这一企划中计划包含的内容  


  


  


，除后续两章外  
     
     
  ，除非我有更有意思的内容想要发表


   




   




   
，我会尽量维持一周一篇的更新频率   




    




    




。希望得到各位读者的监督和关注













。

您可能会好奇标题中「初级篇」的含义 



 



 



，没错              ，无论是对于 Web 3D 世界还是 Three.js 而言



    




    




    ，掌握初级篇的内容仅仅算是入门














，如果您选择继续探索              ，前方还为您保留了更广阔的天地



     



     



     ，例如：

粒子效果； 着色器； 性能优化； React Three Fiber； ...

不过这些都是后话了













，万丈高楼平地起    
    
    
，请先跟随我一同完成本阶段的学习吧


     


     


    ，这将是一段漫长的旅程
 




 




 


，希望您旅途愉快 ?               。

4. 如何学习？

想要通过本系列文章入门 Three.js 技术   

   

   

，您需要确保您熟悉 JavaScript 语言 

     

     

   ，并能够理解例如 Babel

  




  




  

，Vite  


  


  


，Webpack 之类的打包工具如何使用    



     



     



。

文章会包含「基础概念讲解」和「代码示例」两个部分  
     
     
  ，希望您不仅阅读文章


   




   




   
，还能够积极地动手实践














。

我十分鼓励您通过各类平台展示您的学习成果 



 



 



，分享您的学习经验    
    
    。如果本系列文章为您提供了切实的帮助              ，我也希望您愿意积极附上文章链接



    




    




    ，让更多的人受益     


     


     


。

5. 如何检验学习成果？

如何检验您是否真正入门 Three.js 呢？通过阅读完本系列文章














，您应该能够独立搭建一个如下的 3D 场景（这个例子引用了 Bruno Simon 在 three.js journey 课堂中的一个示例              ，因为我觉得它能够让您充分利用之前所学）

⚠️ 注意：未来该案例有可能会被替换




 




 




。

6. ? 思考题

您为什么想要学习 Three.js 技术？ 您认为 Three.js 技术有哪些可能的使用场景？

欢迎您在评论区与大家交流讨论
   

   

   。

7. 总结

在本篇文章中



     



     



     ，我向您介绍了什么是 Three.js 以及本系列文章将如何带您步入 Web 3D 世界的大门     

     

     

。不知道您是否对此旅途充满期待？希望您保持关注













，欢迎您在评论区与我交流 




  




  




。

8. 参考资料

Three.js 官网； three.js journey；

9. 使用到的工具

屏幕录制：QuickTime Player； 视频转 GIF 图片：iLoveIMG；

? 支持创作

您有很多方式可以表达您喜欢这篇文章    
    
    
，并愿意支持我持续创作


     


     


    ，例如：

点击各类平台「喜欢」按钮； 将文章转发在各类您喜欢的平台
 




 




 


，并为它写一份简短的推荐语； 在评论区留言； 关注我的个人公众号「前端乱步」； ...

无论您选择哪一项   

   

   

，我都会因为您的欣赏而感到愉悦

  


  


  。