第一节 three.js 入门介绍【Three.js整理】

Three.js

Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。Three.js使用WebGL。源代码托管在GitHub。Three.js允许使用JavaScript创建网页中的GPU加速的3D动画元素，而不是使用特定的浏览器插件。这归功于WebGL的出现。

webgl封装成便于用户使用的Three.js ，类似jquery封装了JavaScript，那么什么是webgl呢？

WebGL

WebGL是一种JavaScript API，用于在不使用插件的情况下在任何兼容的网页浏览器中呈现交互式2D和3D图形[2]。WebGL完全集成到浏览器的所有网页标准中，可将影像处理和效果的GPU加速使用方式当做网页Canvas的一部分。WebGL元素可以加入其他HTML元素之中并与网页或网页背景的其他部分混合，WebGL技术结合了HTML5和 Java Script，允许开发者在网页（Web页面）上创建和渲染三维图形。

OpenGL_ES

OpenGL ES（OpenGL for Embedded Systems）是三维图形应用程序接口OpenGL的子集，针对手机、PDA和游戏主机等嵌入式设备而设计。该API由科纳斯组织定义推广，科纳斯是一个图形软硬件行业协会，该协会主要关注图形和多媒体方面的开放标准。

OpenGL

OpenGL（英语：Open Graphics Library，译名：开放图形库或者“开放式图形库”）是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。这个接口由近350个不同的函数调用组成，用来从简单的图形比特绘制复杂的三维景象。而另一种程序接口系统是仅用于Microsoft Windows上的Direct3D。OpenGL常用于CAD、虚拟现实、科学可视化程序和电子游戏开发。

https://www.tutorialspoint.com/webgl/webgl_introduction.htm扩展阅读
WebGL 工作原理https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-how-it-works.html

WebGL仅仅是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。想要利用WebGL完成更复杂任务，取决于你能否提供合适的代码，组合使用点，线和三角形代替实现。

WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器，另一个叫片断着色器，并且使用一种和C或C++类似的强类型的语言GLSL。 (GL着色语言)。每一对组合起来称作一个program（着色程序）。

The Book of Shaders: Hello world!Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.https://thebookofshaders.com/02/?lan=ch

The Book of Shaders: uniformsGentle step-by-step guide through the abstract and complex universe of Fragment Shaders.https://thebookofshaders.com/03/?lan=ch

The Book of Shaders: Shaping functionshttps://thebookofshaders.com/05/?lan=ch

Glsl中是使用到的函数

将上面的公式与下面的图片联系到一起

官网：https://threejs.org/https://threejs.org/

在线编辑：https://mrdoob.com/projects/htmleditor/

案例：

https://threejs.org/examples/#css3d_moleculeshttps://threejs.org/examples/#css3d_molecules

three.js webgl - IFCLoaderhttps://threejs.org/examples/webgl_loader_ifc.html

three.js exampleshttps://threejs.org/examples/#webgl_panorama_cube

three.js exampleshttps://threejs.org/examples/#webgl_points_dynamic

three.js exampleshttps://threejs.org/examples/#webgl_water

three.js webgl - GLTFloader + variantshttps://threejs.org/examples/webgl_loader_gltf_variants.html

three.js exampleshttps://threejs.org/examples/#webgl_loader_gltf_sheen

FF 91 VRFF 91 VR - Experience Faraday Future's 3D simulation of their flagship vehicle: FF 91http://vr.ff.com/us/FF 91 VRFF 91 VR - Experience Faraday Future's 3D simulation of their flagship vehicle: FF 91http://vr.ff.com/us/

Earth 2050: A glimpse into the future | Kasperskyhttps://2050.earth/

Trigger RallyFast arcade rally racing action! Play in your browser with WebGL 3D graphics.https://codeartemis.github.io/TriggerRally/server/public/

WebVR Showroom by Little WorkshopWebVR Showroom by Little Workshop

目前应用现状：物联网、数字孪生（概念）

智慧仓库

智慧园区

智慧机房

智慧建筑

智慧工厂

未来展望：

5G的发展、数字孪生（成熟阶段）、沉浸式虚拟社交（美剧：西部世界）、沉浸式游戏（电影：盗梦空间，游戏：使命召唤）

元宇宙：脑机接口+VR虚拟现实+AR增强现实；eg：西部世界、盗梦空间

通过github与我交流：

three.js-ply-point-cloud/wechart.png at main · wlii/three.js-ply-point-cloud · GitHub

第一节 three.js 入门介绍【Three.js整理】相关推荐

第一节：基础概念介绍（黄老师）
最近偶然在网上看到韦东山老师的课程--7天物联网智能家居实战训练,常常在关于Linux学习或者嵌入式学习的文章中看到韦东山老师的名字,但是还从来没有实际听过,因为大家都说要先从51,再过渡到STM32 ...
移动手机应用开发js框架zepto.js入门介绍
zepto.js是一个专为mobile WebKit浏览器(如:Safari和Chrome)而开发的一个JavaScript框架. 它标榜自己在其简约的开发理念,能够帮助开发人员简单.快速地完成开发交 ...
FireBug 调试JS入门 —如何调试JS
安装就不用说了,很简单,在FireFox上插件库里找到FireBug就Ok了.下图是FireBug Debug 窗口. FireBug美工用的非常普遍,公司美工妹妹用的非常熟练呵呵,而对于我们开发人 ...
第一节：开发工具介绍及环境变量配置（讲师笔记篇）
01.01_计算机基础知识(计算机概述)(了解) A:什么是计算机?计算机在生活中的应用举例计算机(Computer)全称:电子计算机,俗称电脑.是一种能够按照程序运行,自动.高速处理海量数据的现代 ...
第一节：Ajax 入门及环境
Ajax 介绍全称:Asynchronous Javascript And XML 作用:获取服务器的数据应用场景页面上拉加载更多数据列表数据无刷新分页表单项离开焦点数据验证搜索框提示文字 ...
（软件工程复习核心重点）第二章可行性研究-第一节：可行性研究基本介绍
文章目录一:可行性研究的目的二:可行性研究的本质三:可行性研究的任务 (1)最根本任务 (2)具体任务二:可行性研究过程(步骤) 一:可行性研究的目的可行性研究的目的:用最小的代价在最小的时 ...
Node.js 入门教程 23 使用 npm 的语义版本控制 24 卸载 npm 软件包 25 npm 全局或本地的软件包
Node.js 入门教程 Node.js官方入门教程 Node.js中文网本文仅用于学习记录,不存在任何商业用途,如侵删文章目录 Node.js 入门教程 23 使用 npm 的语义版本控制 24 ...
Node.js 入门教程 6 V8 JavaScript 引擎
Node.js 入门教程 Node.js官方入门教程 Node.js中文网本文仅用于学习记录,不存在任何商业用途,如侵删文章目录 Node.js 入门教程 6 V8 JavaScript 引擎 6 ...
php引入外部js,vue.js怎么引入外部js,vue引入第三方js库
vue.js怎么引入外部js·怎么介绍外部js,在vue.js中引入外部js的方法如下:1.使用外部文件[config.js],代码为[函数格式XML(text){ return text }]:2. ...

第一节 three.js 入门介绍【Three.js整理】

第一节 three.js 入门介绍【Three.js整理】相关推荐

最新文章

热门文章