Three.js初试——基础概念

news/2024/3/28 20:53:43/文章来源:https://blog.csdn.net/qq_16525279/article/details/129254693

一、Three.js 是什么

先附上文档:

官网:JavaScript 3D Library

中文文档:中文文档

Three.js 是一个让用户通过 javascript 入手进入搭建 WebGL 项目的类库。众所周知学习 WebGL 需要图形学知识,而 webgl 需要通过 jsglsl 两种语言,会大大增加前端开发者的学习难度。
因此,Three.js 是我们一个快速上手的工具,对 WebGL 提供的接口进行了非常好的封装,简化了很多细节,大大降低了学习成本,极大地提高了性能,功能也非常强大,用户不需要详细地学习 WebGL,就能轻松创作出三维图形,是前端开发者研发3D绘图的主要工具。

二、概念介绍

1、WebGL

WebGL(Web 图形库)是一个 JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点,该 API 可以在 HTML5 <canvas>元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。

目前支持 WebGL 的浏览器有:

  • Firefox 4+
  • Google Chrome 9+
  • Opera 12+
  • Safari 5.1+
  • Internet Explorer 11+
  • Microsoft Edge build 10240+

然而,WebGL 一些特性也需要用户的硬件设备支持。

WebGL 2 API 引入了对大部分的 OpenGL ES 3.0 功能集的支持; 它是通过WebGL2RenderingContext界面提供的。

<canvas> 元素也被 Canvas API 用于在网页上进行 2D 图形处理。

2、OpenGL

OpenGL是开放式图像库,是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。

3、Canvas

<canvas> 标签通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)。

<canvas> 标签只是图形容器,必须使用脚本来绘制图形。

三、OpenGLWebGLCanvasThree.js 四者关系

  • OpenGL:3D绘图标准
  • WebGL:OpenGL + JavaScript
  • Canvas:WebGL + Canvas 2D
  • Three.js:一个基于WebGL封装的库

四、Three.js 基础入门

入门 Three.js 的第一步,就是认识场景 Scene 、相机 Camera 、渲染器 Renderer 三个基本概念。

threejs

1、场景(Scene)

场景是一个三维空间,是存放所有物品的容器,用来表示模拟生活中的真实三维场景,或者说三维世界。可以把场景想象成一个空房间,房间里面可以放置要呈现的物体、相机、光源等。

// 创建3D场景对象Scene
const scene = new THREE.Scene();

2、相机 (Camera)

在场景中需要添加一个相机,相机用来确定观察位置、方向、角度,相机看到的内容,就是我们最终在屏幕上看到的内容。在程序运行过程中,可以调整相机的位置、方向、角度。
就像你生活中想获得一张照片,需要一台用来拍照的相机。

常用的相机有:

  • 透视投影相机(perspectiveCamera)
  • 正交投影相机(OrthographicCamera )

这里只介绍一下透视投影相机(perspectiveCamera)(重要!!)

透视投影相机 PerspectiveCamera 本质上就是在模拟人眼观察这个世界的规律,近大远小。

// 实例化一个透视投影相机对象
const camera = new THREE.PerspectiveCamera();

透视投影相机的四个参数 fov, aspect, near, far 构成一个四棱台3D空间,被称为视锥体,只有视锥体之内的物体,才会渲染出来,视锥体范围之外的物体不会显示在 Canvas 画布上。
视锥体

// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = window.innerWidth; //宽度
const height = window.innerHeight; //高度
// 50:视场角度, width / height:Canvas画布宽高比, 0.1:近裁截面, 1000:远裁截面
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);

PerspectiveCamera 参数介绍:

PerspectiveCamera( fov, aspect, near, far )
参数含义默认值
fov相机视锥体竖直方向视野角度50
aspect相机视锥体水平方向和竖直方向长度比,一般设置为Canvas画布宽高比width / height1
near相机视锥体近裁截面相对相机距离0.1
far相机视锥体远裁截面相对相机距离,far-near构成了视锥体高度方向2000

3、渲染器 (Renderer)

通过WebGL渲染器 WebGLRenderer 可以实例化一个WebGL渲染器对象。

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

设置Canvas画布尺寸 .setSize()

// 定义threejs输出画布的尺寸(单位:像素px)
const width = 800; //宽度
const height = 500; //高度
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

渲染器渲染方法 .render()

渲染器 WebGLRenderer 执行渲染方法 .render() 就可以生成一个Canvas画布(照片),并把三维场景Scene呈现在canvas画布上面,你可以把 .render() 理解为相机的拍照动作“咔”。

renderer.render(scene, camera); //执行渲染操作

渲染器Canvas画布属性 .domElement

渲染器 WebGLRenderer 通过属性 .domElement 可以获得渲染方法 .render() 生成的Canvas画布,.domElement 本质上就是一个HTML元素:Canvas画布。

document.body.appendChild(renderer.domElement);

Three.js 初试——基础概念介绍完了,后面在慢慢学习新知识,作为入门者,加油!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_75325.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第八届蓝桥杯省赛——4承压计算(二维数组,嵌套循环)

题目&#xff1a;X星球的高科技实验室中整齐地堆放着某批珍贵金属原料。每块金属原料的外形、尺寸完全一致&#xff0c;但重量不同。金属材料被严格地堆放成金字塔形。7 5 8 7 8 8 9 2 7 2 8 1 4 9 1 8 1 8 8 4 1 7 9 6 1 4 5 4 5 6 5 5 6 9 5 6 5 5 4 7 9 3 5 5 1 7 5 7 9 7 4…

车辆热管理测试方案

车辆热管理是在能源危机出现、汽车排放法规日益严格以及人们对汽车舒适性要求更高的背景下应运而生的。将各个系统或部件如冷却系统、润滑系统和空调系统等集成一个有效的热管理系统&#xff1b;控制和优化车辆的热量传递过程&#xff0c;保证各关键部件和系统安全高效运行&…

社交媒体营销的5个好处

有些人认为&#xff0c;社交媒体营销不能直接与销售挂钩。这就是为什么在制定营销策略时&#xff0c;社交媒体营销会被部分人忽视的原因。然而&#xff0c;与其他广告渠道不同&#xff0c;社交媒体是双向渠道。忽视社交媒体营销将影响与客户的关系。最重要的是&#xff0c;它将…

回顾1-idea创建Java项目

创建Java项目 创建项目和模块的区别 环境前置 IDEA开发工具JDK及配置环境变量 创建项目/工程 新建项目 选择Java模块 > SDK( 已配置的JDK ) > 下一步 直接下一步 填写项目信息 QQ游戏工程 里的 叫项目 所以 QQgame目录下 可以放 > 斗地主项目 / 美女来找茬等… …

C while 循环for循环

C 循环 只要给定的条件为真&#xff0c;C 语言中的 while 循环语句会重复执行一个目标语句。 语法 C 语言中 while 循环的语法&#xff1a; while(condition) {statement(s); }在这里&#xff0c;statement(s) 可以是一个单独的语句&#xff0c;也可以是几个语句组成的代码块…

深度学习基础实例与总结

一、神经网络 1 深度学习 1 什么是深度学习&#xff1f; 简单来说&#xff0c;深度学习就是一种包括多个隐含层 (越多即为越深)的多层感知机。它通过组合低层特征&#xff0c;形成更为抽象的高层表示&#xff0c;用以描述被识别对象的高级属性类别或特征。 能自生成数据的中…

DNS服务器部署的详细操作(图文版)

DNS服务器的部署 打开虚拟机后查看已经开放的端口&#xff0c;可以看到没有TCP53、UDP53&#xff0c;说明DNS服务端口没有打开 打开我的电脑—双击CD驱动器— 选择安装可选的Windows组件 选择网络服务—域名系统&#xff08;DNS&#xff09;— 点击下一步后会弹出如下弹…

线程安全实例分析

一、变量的线程安全分析 成员变量和静态变量是否线程安全&#xff1f; ● 如果它们没有共享&#xff0c;则线程安全 ● 如果它们被共享了&#xff0c;根据它们的状态是否能够改变&#xff0c;又分两种情况 —— 如果只有读操作&#xff0c;则线程安全 —— 如果有读写操作&am…

实时手势识别(C++与python都可实现)

一、前提配置&#xff1a; Windows&#xff0c;visual studio 2019&#xff0c;opencv&#xff0c;python10&#xff0c;opencv-python&#xff0c;numpy&#xff0c;tensorflow&#xff0c;mediapipe&#xff0c;math 1.安装python环境 这里我个人使用的安装python10&#…

ABB机器人基础编程_常见数据类型及使用方法介绍

ABB机器人基础编程_常见数据类型及使用方法介绍 1. bool-逻辑值 描述:bool型数据可以为TRUE或FALSE 使用方法举例: 2. 字节-整数值 描述:byte用于符合字节范围的整数值0-255,该数据类型连同处理操作并转换特征的指令和函数一同使用。 使用方法举例: 3. dnum-双数值 描…

云原生是什么?核心概念和应用方法解析

什么是云原生&#xff1f; 云原生是一种基于容器、微服务和自动化运维的软件开发和部署方法。它可以使应用程序更加高效、可靠和可扩展&#xff0c;适用于各种不同的云平台。 如果要更直接通俗的来解释下上面的概念。云原生更准确来说就是一种文化&#xff0c;是一种潮流&…

供应链的有效管理,分析指标有哪些

对于企业而言&#xff0c;供应链是一个很复杂的、体系化的生态系统&#xff0c;从原材料、到供应商、到生产、仓库、物流&#xff0c;最后到达经销商或者最终客户那里&#xff0c;这个链条很长。相关的分析指标也有很多&#xff0c;在这些指标里面也有非常多可以扩展、延申的内…

【Linux驱动】驱动设计硬件基础----串口、I2C、SPI、以太网接口、PCIE

1.前言 常见的外设接口与总线的工作方式&#xff0c;包括串口、I2C、SPI、USB、以太网接口、PCI和PCI-E、SD和SDIO等。 2.串口 RS-232、RS-422与RS-485都是串行数据接口标准&#xff0c;最初都是由电子工业协会&#xff08;EIA&#xff09;制订并发布的。 3.I2C I2C&…

【RabbitMQ七】——RabbitMQ发布确认模式(Publisher Confirms)

RabbitMQ发布确认模式前言如何实现发布确认发布确认模式有三种策略单独发布消息执行结果批量发布消息执行结果异步处理发布确认执行结果思考点如何追踪未完成的确认?重新发布丢失的消息总结收获前言 发布确认是解决消息不丢失的重要环节&#xff0c;在设置队列持久化、消息持…

MySQL实战解析底层---基础架构:一条SQL查询语句是如何执行的?

目录 前言 连接器 查询缓存 分析器 优化器 执行器 前言 平时使用数据库&#xff0c;看到的通常都是一个整体比如&#xff0c;有个最简单的表&#xff0c;表里只有一个 ID 字段&#xff0c;在执行下面这个查询语句时&#xff1a; 看到的只是输入一条语句&#xff0c;返回…

Billu靶场黑盒盲打——思路和详解

一、信息收集 1、探测内网主机IP可以使用各种扫描工具比如nmap&#xff0c;我这里用的是自己编写的。 nmap -n 192.168.12.0/24 #扫描IP&#xff0c;发现目标主机 2、先不着急&#xff0c;先收集一波它的端口&#xff08;无果&#xff09; nmap -n 192.168.12.136 -p 1-10000…

华为OD机试题,用 Java 解【靠谱的车】问题

最近更新的博客 华为OD机试题,用 Java 解【停车场车辆统计】问题华为OD机试题,用 Java 解【字符串变换最小字符串】问题华为OD机试题,用 Java 解【计算最大乘积】问题华为OD机试题,用 Java 解【DNA 序列】问题华为OD机试 - 组成最大数(Java) | 机试题算法思路 【2023】使…

字符串反转-课后程序(JAVA基础案例教程-黑马程序员编著-第九章-课后作业)

【案例9-2】 字符串反转 【案例介绍】 1.案例描述 在使用软件或浏览网页时&#xff0c;总会查询一些数据&#xff0c;查询数据的过程其实就是客户端与服务器交互的过程。用户&#xff08;客户端&#xff09;将查询信息发送给服务器&#xff0c;服务器接收到查询消息后进行处…

数据仓库-数仓分层

层级 全拼 职责划分 ODS(源数据层) Operational DataStore ODS层存储最原始的数据&#xff0c; 对数据不做任何加工处理&#xff1b; 源数据主要来自业务数据库和日志&#xff0c;这些数据是用户操作业务系统产生&#xff0c;所以叫操作型数据(Operational Data) 。 DWD(…

MySQL数据库操作

查看数据库语法show databases——列出所有的数据库 show databases [ like wild ];——列出和字符串wild名字相同的数据库 这里可以配合SQl的 "%" 和 "_" 通配符使用来查找多个数据库在SQL语句中"%"代表任意字符出现任意次数,"_"代表…