ThreeJs搭建web3D场景

简介: 这篇文章讲解了如何使用Three.js来搭建web端的3D场景,并介绍了创建3D项目的基本要素。

今天发现之前都没有写一个关于搭建web端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的文件官网地址:Threejs官网,在download中可以下载到three的相关文件和案例,不过是英文的,觉得不方便也有中文版本的:Three中文网中文网

下面开始学习threeJS的内容:

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

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

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

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

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

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

源码可以参考其他章节提供的。

相关文章
|
6月前
|
存储 缓存 NoSQL
在Python Web开发过程中:数据库与缓存,Redis在Web开发中的常见应用场景有哪些?
Redis在Python Web开发中常用于缓存、会话管理、分布式锁、排行榜、消息队列和实时分析。作为内存数据存储,它提供高效的数据结构(如字符串、哈希、列表、集合、有序集合),支持会话存储、互斥操作、计数与排名、队列实现及实时数据处理。其高速性能和丰富功能使其成为多场景下的理想选择。
69 5
|
15天前
|
Kubernetes 安全 应用服务中间件
动态威胁场景下赋能企业安全,F5推出BIG-IP Next Web应用防火墙
动态威胁场景下赋能企业安全,F5推出BIG-IP Next Web应用防火墙
34 3
|
4月前
|
缓存 监控 安全
中间件在Python Web框架中的角色与应用场景
【7月更文挑战第21天】中间件在Python Web开发中作为服务器与应用间的软件层,拦截、处理请求和响应,无需改动应用代码。它扩展框架功能,复用跨应用逻辑,加强安全,优化性能。如Django中间件处理请求/响应,Flask通过WSGI中间件实现类似功能,两者均在不触及核心代码前提下,灵活增强应用行为,是现代Web开发关键组件。
51 0
|
6月前
|
前端开发 JavaScript
【Web 前端】什么是扩展运算符,用于什么场景?
【5月更文挑战第1天】【Web 前端】什么是扩展运算符,用于什么场景?
【Web 前端】什么是扩展运算符,用于什么场景?
|
6月前
|
JavaScript 前端开发 CDN
Threejs搭建web3D场景
这是一个基本的Three.js 3D场景的示例。你可以根据自己的需求添加更多的3D元素、纹理、光照和交互功能。
87 4
|
6月前
|
消息中间件 缓存 NoSQL
设计一个高并发场景下的Python Web应用架构。
在高并发Python Web架构中,关键组件包括负载均衡器用于分散请求,应用服务器如Gunicorn与Docker部署多实例,缓存如Redis提升数据访问速度,优化后的数据库(如MySQL或MongoDB),消息队列如RabbitMQ处理异步任务,通过横向扩展增加服务器,监控和日志系统确保稳定性,代码优化减少不必要的操作,CDN加速静态资源,以及自动化部署和弹性伸缩工具适应负载变化。性能测试和优化是保证系统稳定性的关键。
73 4
|
6月前
|
JavaScript 前端开发 中间件
Node.js Web 模块的各种用法和常见场景
Node.js Web 模块的各种用法和常见场景
61 1
|
12月前
|
存储 前端开发 API
Session、Cookie、localStorage和SessionStorage是Web前端开发中常用的数据存储方式,它们之间各有不同的特点和适用场景。
Session、Cookie、localStorage和SessionStorage是Web前端开发中常用的数据存储方式,它们之间各有不同的特点和适用场景。
87 0
|
26天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
86 3
|
7天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
81 44

热门文章

最新文章