「和我一起学 XXX」是我 2023 年的一个新企划,目的是向读者(也包括未来的自己)介绍我正在学习的某项新技术。文章会通过长期反复迭代的方式保持其内容的新鲜度。文章有较大内容更新时,会在文章开头进行更新时间说明(由于时间精力有限,更新的内容只能保障少数几个平台的同步,请见谅)。

1. 什么是 Three.js

Three.js 是一个基于 WebGL3D 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. 思考题

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

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

7. 总结

在本篇文章中,我向您介绍了什么是 Three.js 以及本系列文章将如何带您步入 Web 3D 世界的大门。不知道您是否对此旅途充满期待?希望您保持关注,欢迎您在评论区与我交流。

8. 参考资料

9. 使用到的工具

  • 屏幕录制:QuickTime Player;
  • 视频转 GIF 图片:iLoveIMG

支持创作

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

  • 点击各类平台「喜欢」按钮;
  • 将文章转发在各类您喜欢的平台,并为它写一份简短的推荐语;
  • 在评论区留言;
  • 关注我的个人公众号「前端乱步」;
  • ...

无论您选择哪一项,我都会因为您的欣赏而感到愉悦。

👋 和我一起学【Three.js】「初级篇」:0. 总论的更多相关文章

  1. PHP丨PHP基础知识之PHP基础入门——函数「理论篇」

    前两天讲过PHP基础知识的判断条件和流程控制,今天来讲讲PHP基础知识之PHP基础入门--函数! 一.函数的声明与使用 1.函数名是标识符之一,只能有数字字母下划线,开头不能是数字. 函数名的命名,须 ...

  2. PHP丨PHP基础知识之流程控制WHILE循环「理论篇」

    昨天讲完FOR循环今天来讲讲他的兄弟WHILE循环!进入正题: while是计算机的一种基本循环模式.当满足条件时进入循环,进入循环后,当条件不满足时,跳出循环.while语句的一般表达式为:whil ...

  3. PHP丨PHP基础知识之条件语IF判断「理论篇」

    if语句是指编程语言(包括c语言.C#.VB.java.php.汇编语言等)中用来判定所给定的条件是否满足,根据判定的结果(真或假)决定执行给出的两种操作之一. if语句概述 if语句是指编程语言(包 ...

  4. PHP丨PHP基础知识之条件语SWITCH判断「理论篇」

    Switch在一些计算机语言中是保留字,其作用大多情况下是进行判断选择.以PHP来说,switch(开关语句)常和case break default一起使用 典型结构 switch($control ...

  5. 「C++ 篇」答应我,别再if/else走天下了可以吗

    每日一句英语学习,每天进步一点点: "Without purpose, the days would have ended, as such days always end, in disi ...

  6. 【Logback+Spring-Aop】实现全面生态化的全链路日志追踪系统服务插件「Logback-MDC篇」

    日志追踪 日志追踪对于功能问题的排查和数据流转的路径分析时非常重要的,有了全链路日志追踪体系机制可以非常有效且快速的定位问题,但在多线程环境中,若没有相关成熟的框架的支持,想要实现日志追踪,就需要手动 ...

  7. 【重学Node.js 第5篇】部署项目到腾讯云服务器

    课程介绍看这里:https://www.cnblogs.com/zhangran/p/11963616.html 项目github地址:https://github.com/hellozhangran ...

  8. 【重学Node.js 第4篇】实现一个简易爬虫&启动定时任务

    实现一个简易爬虫&启动定时任务 课程介绍看这里:https://www.cnblogs.com/zhangran/p/11963616.html 项目github地址:https://gith ...

  9. 【重学Node.js 第3篇】mongodb以及mongoose的使用

    mongodb以及mongoose的使用 本篇为这个系列的第三篇,想看更多可以直接去github的项目:https://github.com/hellozhangran/happy-egg-serve ...

  10. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

随机推荐

  1. 几个Shell脚本的例子

    [例子:001]判断输入为数字,字符或其他 #!/bin/bash read -p "Enter a number or string here:" input case $inp ...

  2. Java基础——二维数组

    package com.zhao.demo; public class Demo08 { public static void main(String[] args) { //二维数组 int[][] ...

  3. cadence报错:Class must be one of IC, IO, DISCRETE, MECHANICAL, PLATING_BAR or DRIVER_CELL.

    在原理图文件上右键选择Edit Object Properties, 然后在class一栏中修改class为IC, IO, DISCRETE, MECHANICAL, PLATING_BAR or D ...

  4. Miller-Rabin素性判定算法

    Miller-Rabin素性判定算法是一种基于概率的判定算法,每次判定n是素数的正确性概率至少为75%,出错的概率小于25%. 如果对n进行k次素性检测,如果结果n为素数,那么n为合数的概率为1/(4 ...

  5. CCF 202009-2 风险人群筛查

    #include <iostream> #include <bits/stdc++.h> #include <string> using namespace std ...

  6. DOSBox进行文件操作

    1.使用DOSBox进行汇编语言的学习 2.输入edit进行asm文件编辑,保存后输入masm 文件名.asm,进行编译:输入link 文件名进行连接:输入debug 文件名.exe进行执行,并进行调 ...

  7. CH32F103C8T6的USB开发(一)

    一.背景 项目用到单片机采集模拟量数据,原先使用USB转串口,速度嫌慢,还要转串口芯片,电脑还要安装驱动,现更改为采用USB的HID类来传输. 二.单片机选型 STM32F103的USB接口简单易用, ...

  8. 安卓蓝牙协议栈中的RFCOMM状态机分析

    1.1 数据结构 1.1.1  tRFC_MCB tRFC_MCB(type of rfcomm multiplexor control block的简写)代表了一个多路复用器.代表了RFCOMM规范 ...

  9. Vue3父组件调用子组件内部的方法

    1. 子组件中定义方法并通过defineExpose暴露出去 import { reactive, defineExpose } from "vue"; const state = ...

  10. CEOI 2021

    CEOI 2021 \(pts\):64 + 0 + 4 \(T1 : 64pts\) 首先我们肯定知道对于相同的数,一定是放在一起才是最优的,随意我们对于每段查询的区间要保证有序,然后我们发现,每个 ...