ThreeJs简介

简介: 这篇文章介绍了Three.js的基础知识,包括其相对于WebGL的优势以及如何使用Three.js创建基本的3D场景。

了解ThreeJs之前先了解WebGL:

(如果你已经了解了threeJs可以跳过这一章)

WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。显然,WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等等。

ThreeJs实际上是WebGL的框架,Three.js是在WebGL的api接口基础上,又进行的一层封装。相当于js和JQuery的关系,学习webgl需要图形学知识,而webgl需要通过js和glsl两种语言。如果我们不通过threejs使用webgl势必逃不过底层知识:你必须全面了解着色器语法和自己编写顶点着色片元着色;而有了Three.js就可以大大减少了3d开发所需的专业知识储备。

先看看Three有哪些特点:
面向对象:开发者可以使用的JavaScript对象,而不是仅仅调用JavaScript函数。原本从事后台java等面向对开发语言的开发者学习起来比较容易
功能非常丰富:Three.js除了封装了WebGL原始API之外,Three.js还包含了许多实用的内置对象,并内置了常用着色器。
速度很快:Three.js采用了3D图形最佳实践来保证在不失可用性的前提下,保持极高的性能。
支持交互:WebGL本身并不提供拾取(picking)功能(即是否知道鼠标正处于某个物体上)。而Three.js则固化了拾取支持,这就使得你可以轻松为你的应用添加交互功能。(鼠标点击发送向内的射线统计穿过的对象来实现交互)
包含数学库:Three.js拥有一个强大易用的数学库,你可以在其中进行矩阵、投影和矢量运算。
内置文件格式支持:你可以使用流行的3D建模软件导出fbx格式或其他格式的文件,然后使用Three.js加载
支持HTML5 canvas:Three.js不但支持WebGL,而且还支持使用Canvas2D、Css3D和SVG进行渲染。

入门:先下载好threeJs的文件官网地址:Three.js – JavaScript 3D Library,在download中可以下载到three的相关文件和案例,不过是英文的,觉得不方便也有中文版本的:Three.js中文网

下面开始学习threeJS的内容:

创建3D项目的几个要素:

1.场景:可以理解为创建一个空间用来展示3D模型,

2.相机:可以理解为人的眼睛,展现给相机的图就是屏幕上展示的图,对应的改变相机的位置和角度也会改变屏幕展示的图

3.渲染器:绘制完3D之后,需要渲染器去按照设定的3D模型位置,角度以及光源等信息进行渲染展示

4.光源:就是类似自然界中的光,绘制了3D模型需要加载上光源才能看得见,

5.3D模型,无论是用three手动绘制还是通过加载器加载的3D文件,加到场景中,否则你的3D场景就什么也没有

相关文章
|
4月前
|
移动开发 JavaScript 前端开发
ThreeJs搭建web3D场景
这篇文章讲解了如何使用Three.js来搭建web端的3D场景,并介绍了创建3D项目的基本要素。
146 1
|
3月前
|
Web App开发 JavaScript 前端开发
ThreeJs-01开发环境搭建
【11月更文挑战第12天】本指南介绍了如何使用 Node.js 和 npm 创建一个基本的 Three.js 项目。首先安装 Node.js 和 npm,然后创建项目目录并初始化项目,接着安装 Three.js 库,最后创建一个简单的 HTML 文件来测试 Three.js 的功能,确保一切正常运行。
204 54
|
4月前
|
编解码 物联网 API
"揭秘SD文生图的神秘面纱:从选择模型到生成图像,一键解锁你的创意图像世界,你敢来挑战吗?"
【10月更文挑战第14天】Stable Diffusion(SD)文生图功能让用户通过文字描述生成复杂图像。过程包括:选择合适的SD模型(如二次元、2.5D、写实等),编写精准的提示词(正向和反向提示词),设置参数(迭代步数、采样方法、分辨率等),并调用API生成图像。示例代码展示了如何使用Python实现这一过程。
231 4
|
4月前
|
机器学习/深度学习 数据可视化 大数据
驾驭股市大数据:Python实战指南
【10月更文挑战第1天】随着信息技术的发展,投资者现在能够访问到前所未有的海量金融数据。本文将指导您如何利用Python来抓取当前股市行情的大数据,并通过分析这些数据为自己提供决策支持。我们将介绍从数据获取到处理、分析以及可视化整个流程的技术方法。
293 2
|
4月前
|
Web App开发 数据可视化 前端开发
Pixi入门第一章:绘制一个小精灵
这篇文章是关于Pixi.js的入门教程第一部分,指导读者如何创建并显示一个基本的2D精灵,适用于开始学习Pixi.js进行2D图形开发的初学者。
125 0
Pixi入门第一章:绘制一个小精灵
|
5月前
|
JavaScript
vue项目中使用vue-router进行路由配置及嵌套多级路由
该文章详细说明了如何在Vue项目中配置和使用vue-router进行单页面应用的路由管理,包括设置嵌套路由和实现多级路由导航的示例。
|
4月前
Threejs创建天空和太阳
这篇文章讲解了如何使用Three.js中的Sky组件来创建真实的天空与太阳效果,包括调整天空的颜色、太阳的位置以及实现大气散射等技巧。
132 3
|
4月前
ThreeJs场景中添加视频
这篇文章详细说明了如何在Three.js场景中添加并播放视频,包括视频纹理的创建与应用,以及如何将视频流显示在3D模型的表面上。
111 2
ThreeJs场景中添加视频
|
SQL 前端开发 安全
详细介绍前后端分离必备的接口规范,包括命名规范、参数规范、错误处理规范等
详细介绍前后端分离必备的接口规范,包括命名规范、参数规范、错误处理规范等
2613 1
|
开发者
2024 乘风者计划全新启航!快来加入吧!
 2021年,阿里云开发者社区焕新升级,重磅推出“乘风者计划”!诚邀四海技术博主入驻社区,泼墨云间,书写天地。入驻社区,即可享丰厚权益! 新的一年,乘风者计划重磅升级!
250652 81
2024 乘风者计划全新启航!快来加入吧!

热门文章

最新文章