Three.js

Three.js 学习笔记，来自：

https://gitchat.csdn.net/columnTopic/5b320731bebc3c4bd7e725cb?utm_source=juhe

https://blog.csdn.net/qq_30100043/article/category/7003591?utm_source=juhe

https://zhuanlan.zhihu.com/p/95463367

前面

什么是 WebGL？

WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API，可以在 HTML5 <canvas> 元素中使用（简介引自 MDN）。

以我的理解，WebGL 给我们提供了一系列的图形接口，能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。

什么是 Three.js？

Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发，他更为人知的网名是 Mr.doob。

Three.js 以简单、直观的方式封装了 3D 图形编程中常用的对象。Three.js 在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易上手的工具，Three.js 的功能也非常强大。最后，Three.js 还是完全开源的，你可以在 GitHub 上找到它的源代码，并且有很多人贡献代码，帮助 Mr.doob 一起维护这个框架。

WEBGL 和 Three.js 的关系

WebGL 原生 API 是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门真的很难，Three.js 将入门的门槛降低了一大截，对 WebGL 进行封装，简化我们创建三维动画场景的过程。只要你有一定的 JavaScript 基础，有一定的前端经验，我坚信，用不了多长时间，三维制作会变得很简单。

用最简单的一句话概括：WebGL 和 Three.js 的关系，相当于 JavaScript 和 jQuery 的关系。

功能概述

Three.js 作为 WebGL 框架中的佼佼者，由于它的易用性和扩展性，使得它能够满足大部分的开发需求，Three.js 的具体功能如下：

Three.js 掩盖了 3D 渲染的细节：Three.js 将 WebGL 原生 API 的细节抽象化，将 3D 场景拆解为网格、材质和光源（即它内置了图形编程常用的一些对象种类）。
面向对象：开发者可以使用上层的 JavaScript 对象，而不是仅仅调用 JavaScript 函数。
功能非常丰富：Three.js 除封装了 WebGL 原始 API 之外，Three.js 还包含了许多实用的内置对象，可以方便地应用于游戏开发、动画制作、幻灯片制作、髙分辨率模型和一些特殊的视觉效果制作。
速度很快：Three.js 采用了 3D 图形最佳实践来保证在不失可用性的前提下，保持极高的性能。
支持交互：WebGL 本身并不提供拾取（Picking）功能（即是否知道鼠标正处于某个物体上）。而 Three.js 则固化了拾取支持，这就使得你可以轻松为你的应用添加交互功能。
包含数学库：Three.js 拥有一个强大易用的数学库，你可以在其中进行矩阵、投影和矢量运算。
内置文件格式支持：你可以使用流行的 3D 建模软件导出文本格式的文件，然后使用 Three.js 加载，也可以使用 Three.js 自己的 JSON 格式或二进制格式。
扩展性很强：为 Three.js 添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构，那么只需要封装到 Three.js 即可。
支持HTML5 Canvas：Three.js 不但支持 WebGL，而且还支持使用 Canvas2D、Css3D 和 SVG 进行渲染。在未兼容 WebGL 的环境中可以回退到其它的解决方案。

Threejs学习笔记相关推荐

Extjs 4.2 MVC+ThreeJs学习笔记（二）一个简单的ThreeJS场景
ThreeJS基本要素在我们用ThreeJS创建的3D世界里,会有很多的元素,然而以下四个是最基本的元素,也就是说只要包含了这些元素,就可以渲染出一个场景. 一个Scene(场景) 一个render ...
threejs学习笔记：实现导入的动画gltf模型播放动画
这种方式需要gltf模型本身就带有动画,就是在建模的时候添加了动画,否则是不会生效的只有一个动作 // 用于收集动画 const clock: THREE.Clock = new THREE.Clo ...
threejs学习笔记：CSS2DObject 2d文字渲染
import {CSS2DRenderer,CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";/ ...
Three-js 学习笔记（2）——几何体
1,安装three npm install --s three 2,渲染几何图形 (1)添加vue元素 <template><div class="geometry_01& ...
threejs 物体根据相机位置显示_Threejs学习笔记(一) 基础篇
基本概念此学习笔记主要记录使用threejs的制作http://sqace.163.com网站中用到的API和相关知识点. 一个完整的3D环境包含以下元素: 1.场景(Scene):是物体.光源等元 ...
【带着canvas去流浪（11）】Three.js入门学习笔记
[摘要] three.js 入门学习笔记示例代码托管在:http://www.github.com/dashnowords/blogs 一. 资料推荐及建议 1.官方文档很详细,但是API部分单独 ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...

Threejs学习笔记

Three.js

前面

什么是 WebGL？

什么是 Three.js？

WEBGL 和 Three.js 的关系

功能概述

Threejs学习笔记相关推荐

最新文章

热门文章

Threejs学习笔记

Three.js

前面

什么是 WebGL？

什么是 Three.js？

WEBGL 和 Three.js 的关系

功能概述

insertAdIfNeeded();

Threejs学习笔记相关推荐

最新文章

热门文章