首页 > 其他分享 >threejs基础

threejs基础

时间:2023-07-04 22:12:33浏览次数:47  
标签:threejs OpenGL WebGL 基础 Three js Canvas 3D

一、学习收获

1、OpenGL、WebGL、Canvas、Three.js四者关系

2、Three.js 三大要素

3、Three.js基本要素

4、Three.js 相关插件的使用

5、使用Three.js展示3D几何体效果

二、主要内容:

1、Three.js前提须知

讲到 Three.js,就需要先说一下 OpenGL 和 WebGL, OpenGL 是一个跨平台的3D/2D的绘图标准(规范),WebGL(Web Graphics Library)是一种3D绘图协议,它允许把JavaScript和OpenGL 结合在一起运用,但使用WebGL原生的API来写3D程序非常的复杂,同时需要相对较多的数学知识,对于前端开发者来说学习成本非常高。

1.1 WebGL

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

1.2 OpenGL

OpenGL是开放式图形标准,跨编程语言、跨平台,Javascript、Java 、C、C++ 、 python 等都能支持OpenGL ,OpenGL的Javascript实现就是WebGL。OpenGL ES 2.0是OpenGL的子集,针对手机、游戏主机等嵌入式设备而设计。

1.3 Canvas

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

2、Three.js是什么?

官网:Javascript 3D library(JavaScript 3D 库)。Three.js是基于webGL的封装的一个易于使用且轻量级的3D库,Three.js对WebGL提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本,极大地提高了性能,功能也非常强大,用户不需要详细地学习 WebGL,就能轻松创作出三维图形,是前端开发者研发3D绘图的主要工具。微信小游戏跳一跳也是在基于Three.js研发的,Threejs现在是独领风骚。

简言之:Three.js就是能够实现3D效果的JS库

3、OpenGL、WebGL、Canvas、Three.js四者关系

OpenGL:3D绘图标准

WebGL:OpenGL + JavaScript

Canvas:WebGL + Canvas 2D

Three.js:一个基于WebGL封装的库

类似于:

ECMAscript:脚本语言规范

JavaScript:脚本语言

jQuery: 一个基于JavaScript封装的库

简单一句话概括:WebGL和Three.js的关系,相当于JavaScript和jQuery的关系。

image-20230704210044510

4、Three.js应用场景有哪些?

image-20230704205956903

作者:筱竹
链接:https://juejin.cn/post/7020396322062598181
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

标签:threejs,OpenGL,WebGL,基础,Three,js,Canvas,3D
From: https://www.cnblogs.com/U204-zzq/p/17526991.html

相关文章

  • Python基础37 基于tcp、udp套字编程、粘包现象、struct模块
    基于tcp协议的套接字编程(sochet编程)什么是socket?通常翻译为套接字,socket是在应用层和传输层之间的一个抽象层,它把tcp/ip层复杂的操作抽象为几个简单的接口供应用层调用已实现进程在网络中。套接字分类:AF_UNIX:用在局域网中AF_INET:用在互联网中客户端和服务端启动顺序......
  • C++基础知识
    1.类1//创建类2classPerson{34//公共的属性5public:6voidsetAge(intage){7this->age=age;8}9~Person{}//析构函数10voidsetName(stringname){11this->name=name;12}1314intgetAge(){15......
  • 【10.0】前端基础之JavaScript进阶
    【10.0】前端基础之JavaScript进阶【一】自定义对象可以看成Python中的字典,但是在JS中的自定义对象要比Python里面的字典操作起来更方便【1】创建自定义对象方式一vard={"键":"值",};操作方法vardict={"name":"dream","age":18};vardict={"name":"dream&......
  • 【8.0】前端基础之JavaScript引入
    【8.0】前端基础之JavaScript引入【一】什么是JavaScriptjs也是一门编程语言,他可以写后端代码JavaScript想一统天下,前后端都写于是node.js支持JS代码跑在后端服务器上但是并不能完美的实现JavaScript和Java一毛钱关系都没有,纯粹是为了蹭Java的热度【二】JavaScrip......
  • 【7.0】前端基础之CSS案例
    【7.0】前端基础之CSS案例在设计页面的时候先用div划分页面,再去填充数据,再去填充样式html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>CnBlogs</title><linkrel="stylesheet"href=&quo......
  • 【9.0】前端基础之JavaScript初识
    【9.0】前端基础之JavaScript初识js也是一门面向对象的编程语言,一切皆对象【一】变量命名规范变量名只能是数字/字母/下划线/$变量名命名规范(js中推荐驼峰式命名法)变量民不能用关键字作为变量名【二】JS代码的书写位置可以单独开设JS文件书写还可以直接在浏览......
  • 【FPGA基础】COE文件与MIF文件使用方法
    在FPGA开发中,COE文件和MIF文件是常用的存储器初始化文件。COE文件和MIF文件都用于导入存储器ROM或RAM的存储数据,但是它们的格式和语法有些不同。其中COE文件主要用于Vivado,MIF文件主要用于AlteraQuartus软件。本文主要介绍COE文件和MIF文件的使用方法。一、COE文件COE文件是一......
  • python基础day37 基于TCP、UDP协议的套接字编程和粘包现象
    基于TCP协议的套接字编程(socket编程)什么是Socket?我们经常把Socket翻译为套接字,Socket是在应用层和传输层之间的一个抽象层,它把TCO/IP层复杂的操作抽象为几个简单的接口供应用层调用以实现进程在网络中通信  套接字的分类:AF_UNIX:用在局域网中AF_INET:用在互联网中客户......
  • k3s 基础 —— 配置 loki
    官方文档核心组件3个chart:promtail这是一个agent代理客户端,用于收集日志,将日志传送给lokiloki核心组件,主要功能是日志数据的写入与分析。包含gateway、read、write3个组件。kube-prometheus-stack这个技术栈包含prometheus,grafana,prometheusoperator等组件。p......
  • web开发基础笔录(5)-Javascript(1)
    目录概述概述JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。......