Three.js - 走进3D的奇妙世界

宜信技术学院

于 2019-11-28 09:57:03 发布

阅读量627

点赞数 1

分类专栏：程序员笔记文章标签： Three.js WebGL JavaScript 前端开发

本文链接：https://blog.csdn.net/gao2175/article/details/103287990

版权

本文深入浅出地介绍了Three.js，一个基于WebGL的JavaScript库，用于实现网页3D效果。通过Three.js，开发者可以创建丰富的3D动画和交互，提升用户体验。文章涵盖Three.js的基础概念，包括相关技术如WebGL、OpenGL和Canvas，并讨论了场景、相机、渲染器等核心组件。此外，还介绍了正交相机和透视相机的区别，以及如何添加光源和纹理以增强3D效果。

摘要由CSDN通过智能技术生成

摘要：本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。

文章来源：宜信技术学院 & 宜信支付结算团队技术分享第6期-支付结算部支付研发团队前端研发高级工程师-刘琳《three.js - 走进3D的奇妙世界》

分享者：宜信支付结算部支付研发团队前端研发高级工程师-刘琳

原文首发于支付结算团队公号-“野指针”

随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。

一、Three.js相关概念

1.1 Three.JS

Three.JS是基于WebGL的Javascript开源框架，简言之，就是能够实现3D效果的JS库。

1.2 WebGL

WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。

1.3 OpenGL

OpenGL是开放式图形标准，跨编程语言、跨平台，Javascript、Java 、C、C++ 、 python 等都能支持OpenG ，OpenGL的Javascript实现就是WebGL，另外很多CAD制图软件都采用这种标准。OpenGL ES 2.0是OpenGL的子集，针对手机、游戏主机等嵌入式设备而设计。

1.4 Canvas

Canvas是HTML5的画布元素，在使用Canvas时，需要用到Canvas的上下文，可以用2D上下文绘制二维的图像，也可以使用3D上下文绘制三维的图像，其中3D上下文就是指WebGL。

Three.js - 走进3D的奇妙世界

二、Three.js应用场景

利用Three.JS可以制作出很多酷炫的3D动画，并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互，在页面上增加一些3D动画和3D交互可以产生更好的用户体验。

通过Three.JS可以实现全景视图，这些全景视图应用在房产、家装行业能够带来更直观的视觉体验。在电商行业利用Three.JS可以实现产品的3D效果，这样用户就可以360度全方位地观察商品了，给用户带来更好的购物体验。另外，使用Three.JS还可以制作类似微信跳一跳那样的小游戏。随着技术的发展、基础网络的建设，web3D技术还能得到更广泛的应用。

Three.js - 走进3D的奇妙世界