【Three.js】初识 Three.js

Threejs介绍

我们开发 webgl 主要是使用 threejs 这个库,因为 webGL太难用,太复杂!但是现代浏览器都支持WebGL,这样我们就不必使用Flash、Java等插件就能在浏览器中创建三维图形。

threejs 它提供-一个很简单的关于WebGL特性的JavaScript API, 使得用户不需要详细地学习webgl ,就能轻松创作出好看的三维图形样例。

webgl 原生的 api 是一种非常低级的接口,而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说,入门真的很难,Three.js将入门的门槛降低了整整的一大截,对WebGL进行封装,简化我们创建三维

动画场景的过程。

微信小游戏跳一跳也是在Three,js的基础上开发出来的。

Threejs该项目的目的是使用默认的 webgl 渲染器创建一个易于使用,轻量级的3D库。该库还在示例中提供了 Canvas2D,SVG和CSS3D渲染器。

https://github.com/mrdoob/three.js

特点

优势
  1. Three.js掩盖了3D渲染的细节:Three.js将WebGL原生API的细节抽象化,将3D场景拆解为网格、材质和光源,即它内置了图形编程常用的一些对象种类。
  2. 面向对象:开发者可以使用上层的 JavaScript对象,而不是仅仅调用JavaScript函数。
  3. 功能非常丰富:Three.js除了封装了WebGL原始API之外,Three,js还包含了许多实用的内置对象,可以方便地应用于游戏开发、动画制作、幻灯片制作、高分辨率模型和一些特殊的视觉效果制作。
  4. 速度很快:Three.is采用了3D图形最佳实践,来保证在不失可用性的前提下,保持极高的性能。支持交互:webgl 本身并不提供拾取(picking)功能(即是否知道鼠标正处于某个物体上)。而Three.js则固化了拾取支持,这就使得你可以轻松为你的应用添加交互功能。
  5. 包含数学库:Three.is拥有一个强大易用的数学库,你可以在其中进行矩阵、投影和矢量运算。
  6. 内置文件格式支持:你可以使用流行的3D建模软件导出文本格式的文件,然后使用Three.isjs 加载,也可以使用Three.js自己的 json 格式或二进制格式。
  7. 扩展性很强:为Three.js添加新的特性或进行自定义优化是很容易的事情。如果你需要某个特殊的数据结构,那么只需要封装到Three,js即可。
痛点
  1. 官方问的粗糙,对新手不友好
  2. 国内资源匮乏
  3. 如果想要开发游戏,threejs 不是游戏引擎,需要二次开发

与Babylon.js对比:

Babylon.JS是最好的 JavaScript.3D游戏引擎,它能创建专业级三维游戏。主要以游戏开发和易用性为主。与Three,js之间的对比:

  1. Three,js比较全面,而Babylon.js专注于游戏方面。
  2. Babylon.js提供了对碰撞检测、场景重力、面向游戏的照相机Three.js 本身不自带,需要依靠引入插件实现。
  3. 对于WebGL的封装,双方做的各有千秋,Three,js浅一些,好处是易于扩展,易于向更底层学习;Babylon.js深一些,好处是易用扩展难度大一些。
  4. Three.js的发展是依靠社区推动,出来的比较早,发展比较成熟,Babylon.js是由微软公司在2013推出,文档和社区都比较健全,国内还不怎么火。

threejs 在线编辑器:https://threejs.org/editor/

相关推荐
Cc.Y14 小时前
Java零基础入门:可变字符串与包装类:StringBuilder、StringBuffer 与 通讯录管理系统实战
java·开发语言·python
paopaokaka_luck14 小时前
基于springboot+vue的智慧家政管理系统(AI问答、 WebSocket实时沟通、ECharts运营分析、订单规则与服务追踪)
java·javascript·spring boot·数据分析·echarts·mybatis
阿森_dev14 小时前
2027 届毕设选题怎么选:30 个 Java 方向选题的实现难度排序
java·开发语言·spring boot·毕业设计·课程设计
by2099914 小时前
C++ 多态:同一个基类接口,调用不同的函数
开发语言·c++·经验分享·多态
笔墨登场说说14 小时前
flink bin/start-cluster.sh 帮我做成开机启动
开发语言·python
Sarvartha14 小时前
Lambda 表达式和函数式接口
java·开发语言
小白学大数据14 小时前
拼多多反爬对抗实战:Scrapy 中间件化采集架构解析
开发语言·scrapy·中间件·架构
溪语流沙15 小时前
【每天一个CSS | Day19】流光文字与一笔写成的手写签名
前端·javascript·css
学逆向的15 小时前
win32注入代码
开发语言·网络安全·api·win32
Sarvartha15 小时前
内部类知识
java·开发语言