当前位置： 首页 > news >正文

WebGL+Three.js入门与实战——给画布换颜色、绘制一个点、三维坐标系

news 2025/12/6 8:45:20

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js🍖数据结构与算法体系教程

🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

文章目录

    • 前言
    • 一、canvas 和 webgl
      • 1、给画布换颜色-Canvas实现
      • 2、给画布换颜色-WebGL实现
    • 二、使用 WebGL 绘制一个点
    • 三、WebGL三维坐标系
    • 总结

前言

大家好，这里是前端杂货铺。

前端分为多种方向，其中 图形学方向 变得越来越火热，那么说到图形学在前端的使用，就不得不提起 WebGL。

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起，通过 增加 OpenGL ES 2.0 的一个 JavaScript 绑定，WebGL 可以为 HTML5 Canvas 提供硬件 3D加速渲染，这样 Web开发人员 就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。

接下来，我们来系统的学习 WebGL 及其框架 Three.js，进而完成 前端图形学方向 的入门！

一、canvas 和 webgl

Canvas API 提供 二维 绘图的方式，用于显示 二维 和 三维 的图像。
图像的绘制主要通过 CanvasRenderingContext2D 接口完成。

WebGL API 提供 三维 绘图的方式。
图像的绘制主要通过 WebGLRenderingContext 接口完成。

1、给画布换颜色-Canvas实现

Canvas 实现：首先获取 canvas 画布，之后填充颜色为红色，最后使用 fillRect() 方法绘制"已填充"的矩形。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas><script>const ctx = document.getElementById('canvas');const c = ctx.getContext('2d');c.fillStyle = 'red';// 矩形左上角的x坐标，矩形左上角的y坐标，矩形的宽度(px)，矩形的高度(px)c.fillRect(0, 0, 400, 400);</script>
</body>
</html>

在这里插入图片描述

2、给画布换颜色-WebGL实现

WebGL 实现：首先依旧是获取 canvas 画布，之后指定清空 canvas 的颜色，并接受四个参数（red、green、blue、alpha），最后清空颜色缓存（即在绘制新的图像前，先把旧的图像清除，保证每次绘制的图像都是干净的）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas><script>const ctx = document.getElementById('canvas');const gl = ctx.getContext('webgl');// 指定清空<canvas>的颜色，接受四个参数（rgba）gl.clearColor(1.0, 0.0, 0.0, 1.0);// 清空颜色缓存gl.clear(gl.COLOR_BUFFER_BIT);</script>
</body>
</html>

在这里插入图片描述

二、使用 WebGL 绘制一个点

着色器：着色器就是让开发者自己去编写一段程序，用来代替固定渲染管线，来处理图像的渲染。

顶点着色器：用来描述顶点的特性，通过计算来获取位置信息。 顶点 是指二维三维空间中的一个点，可以理解为一个个坐标。

片元着色器： 进行逐片源处理程序，通过计算来获取颜色信息。片源 可以理解为一个个像素。

绘制一个点：创建顶点着色器源码和片元着色器源码，通过 initShader() 把 gl 上下文 和 顶点着色器、片元着色器 连接起来。initShader() 是封装的一个方法，用于初始化片元着色器源程序。

具体流程及源码如下：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./index.js"></script>
</head>
<body><canvas id="canvas" width="400" height="400" style="background: gray;">此浏览器不支持canvas</canvas><script>const ctx = document.getElementById('canvas');const gl = ctx.getContext('webgl');// 着色器// 创建着色器源码// 顶点着色器const VERTEX_SHADER_SOURCE = `void main() {// 要绘制的点的坐标 x, y, z, wgl_Position = vec4(0.0, 0.0, 0.0, 1.0);// 点的大小(px)gl_PointSize = 30.0;}`;// 片元着色器const FRAGMENT_SHADER_SOURCE = `void main() {// r g b agl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);// 执行绘制gl.drawArrays(gl.POINTS, 0 , 1);</script>
</body>
</html>

初始化片元着色器源程序：

index.js

function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {// 创建着色器const vertexShader = gl.createShader(gl.VERTEX_SHADER);const fragmentSharder = gl.createShader(gl.FRAGMENT_SHADER);gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE) // 指定顶点着色器的源码gl.shaderSource(fragmentSharder, FRAGMENT_SHADER_SOURCE) // 指定片元着色器的源码// 编译着色器gl.compileShader(vertexShader);gl.compileShader(fragmentSharder);// 创建一个程序对象，用于关联JavaScript和WebGLconst program = gl.createProgram();gl.attachShader(program, vertexShader);gl.attachShader(program, fragmentSharder);gl.linkProgram(program);gl.useProgram(program);return program;
}

图形绘制出来了，请大家思考一个问题，在（0.0, 0.0, 0.0）坐标绘制的点为什么在画布的正中间呢？？

在这里插入图片描述

三、WebGL三维坐标系

三维坐标系概览

在这里插入图片描述

绘图区域（NDC坐标：归一化设备坐标）

在WebGL中，坐标系是以绘制画布的中心点为原点，正常的笛卡尔坐标系。而浏览器和Canvas 2D的坐标系统是以左上角为坐标原点，y轴向下，x轴向右，坐标值相对于原点。

在这里插入图片描述

通过两个伪元素 ::before 和 ::after，在canvas中绘制两条线，充当 x 和 y 坐标。此时，我们修改顶点着色器的 gl_Position = vec4(0.5, 0.5, 0.0, 1.0);，观察此时点的位置可以发现，确实符合 NDC 坐标的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./index.js"></script><style>* {margin:0;padding: 0;}#canvas {background: gray;}body::after {content: ' ';display: block;width: 1px;height: 400px;background: red;position: absolute;top: 0;left: 200px;}body::before {content: ' ';display: block;width: 400px;height: 1px;background: red;position: absolute;top: 200px;left: 0;}</style>
</head>
<body><canvas id="canvas" width="400" height="400">此浏览器不支持canvas</canvas><script>const ctx = document.getElementById('canvas');const gl = ctx.getContext('webgl');// 着色器// 创建着色器源码// 顶点着色器const VERTEX_SHADER_SOURCE = `void main() {// 要绘制的点的坐标 x, y, z, wgl_Position = vec4(0.5, 0.5, 0.0, 1.0);// 点的大小(px)gl_PointSize = 30.0;}`;// 片元着色器const FRAGMENT_SHADER_SOURCE = `void main() {// r g b agl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE);// 执行绘制gl.drawArrays(gl.POINTS, 0 , 1);</script>
</body>
</html>

在这里插入图片描述

总结

本文我们主要介绍了 WebGL，它是一种3D绘图协议，允许我们通过 JavaScript 代码在 Canvas 画布上绘制和渲染三维图像。

此外，我们通过使用 canvas 和 webgl 给画布换背景颜色。通过着色器源程序绘制出了一个点。通过伪元素在画布上绘制出来两条线，感受到了 NDC 坐标的独特魅力。

更多 WebGL 和 Three.js 内容正在更新中…

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

  1. 百度百科 · WebGL
    2 WebGL + Three.js入门与实战【作者：yancy_慕课网】

在这里插入图片描述

相关文章：

WebGL+Three.js入门与实战——给画布换颜色、绘制一个点、三维坐标系

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1f4c3;个人状态&#xff1a; 研发工程师&#xff0c;现效力于中国工业软件事业 &#x1f680;人生格言&#xff1a; 积跬步…...

编程日记 2023/12/16 13:30:15

SystemServer 进程启动过程

首语 SystemServer进程主要用于启动系统服务&#xff0c;诸如AMS、WMS、PMS都是由它来创建的。在系统的名称为"system_server"&#xff0c;Android核心服务都是它启动&#xff0c;它是非常重要。 Zygote处理SystemServer进程 在 Zygote启动过程 文章中分析我们知道…...

编程日记 2023/12/16 13:25:10

Java EE 多线程之 JUC

文章目录 1. Callable 接口2. ReentrantLock3. 信号量4. CountDownLatch JUC这里就是指&#xff08;java.util.concurrent&#xff09; concurrent 就是并发的意思 这个包里的内容&#xff0c;主要就是一些多线程相关的组件 1. Callable 接口 Callable 也是一种创建线程的方式…...

编程日记 2023/12/16 13:14:02

Unity光照模型实践

光照作为3D渲染中最重要的部分之一&#xff0c;如何去模拟真实环境的光照是重要的研究内容&#xff0c;但是现实环境光照过于复杂&#xff0c;有很多经典好用的光照模型去近似真实光照。 根据基础的Phong模型 最终某个点的结果为 环境光Ambient 漫反射光Diffuse 高光Specula…...

编程日记 2023/12/16 13:13:01

从0创建并部署一个网页到服务器

创建一个页面 1 下载node.js 下载VScode 2 在Windows下找一个路径新建一个文件夹 例如&#xff1a;D:\study_project\PersonalWeb 3 VSCodee中打开文件夹 4 Windows下 管理员身份打开命令提示符&#xff0c;执行npm install -g vue/cli 5 VSCode下打开终端&#xff0c;执…...

编程日记 2023/12/16 13:08:57

Ubuntu 22.04 安装 OCI CLI

Ubuntu 22.04 安装 OCI CLI 安装命令 安装命令 wget https://codeload.github.com/oracle/oci-cli/zip/master -O oci-cli.zip pip install oci-cli.zip完结&#xff01;...

编程日记 2023/12/16 13:07:56

K8S的安装工具

kubectl Kubernetes 命令行工具 kubectl&#xff0c; 让你可以对 Kubernetes 集群运行命令。 你可以使用 kubectl 来部署应用、监测和管理集群资源以及查看日志。 有关更多信息&#xff0c;包括 kubectl 操作的完整列表&#xff0c;请参见 kubectl参考文件。 kubectl 可安装在…...

编程日记 2023/12/16 13:06:55

vue中哪些数组的方法可以做到响应式

Vue2 中为什么直接通过数组的索引修改元素是不会触发视图更新 vue2 为什么不直接监听数组 Vue2 对于数组提供了一些变异方法 重写数组方法源码分析 定义拦截器将拦截器挂载到数组上面收集依赖 扩展&#xff1a;理解Vue2如何解决数组和对象的响应式问题 对复杂对象的处理 复杂对…...

编程日记 2023/12/16 13:01:50

软考科目如何选择？

软考科目繁多&#xff0c;让许多学弟学妹感到困惑&#xff0c;不知道该选择哪个科目。以下是一些建议&#xff0c;可以根据个人实际需求选择备考的科目。 1、初级是可选的 软考初级非常简单&#xff0c;适合刚刚入门学习的朋友报考。对于一些有基础的朋友&#xff0c;建议直接…...

编程日记 2023/12/16 12:59:49

羊大师解读，血压波动

羊大师解读&#xff0c;血压波动 血压是身体健康的一个重要指标&#xff0c;但有时候我们会发现血压存在着波动的情况。血压波动的原因有很多&#xff0c;包括生活方式、遗传因素、药物影响等等。本文小编羊大师将为大家详细介绍血压波动的原因&#xff0c;以及预防和管理血压…...

编程日记 2023/12/16 12:58:48

关于充值！购买的流量卡第一次在哪充值？这个问题你想过吗？

手机套餐太贵、物联卡体验又不好&#xff0c;而官网申请的流量卡又都是定向流量&#xff0c;所以&#xff0c;运营商推出的只能线上申请的大流量卡一时之间便成了大家关注的焦点。 ​　　在流量卡的使用过程中&#xff0c;申请是免费的&#xff0c;快递是免费的&#xff0c;但…...

编程日记 2023/12/16 12:56:46

HTML基础标签

但实际上无论声明为中文还是英文都可以写&#xff0c;中文/英文 主要是浏览器在进行调用翻译功能的时候&#xff0c;会按照声明的语言来进行翻译。 标签语义&#xff1a; 标签的属性一般都是在第一个标签中定义该标签效果所拥有的属性。 即标签的作用是什么 <>标签功能…...

编程日记 2023/12/16 12:53:43

人大金仓引领医疗行业新标准

近日&#xff0c;由中国信息产业商会团体标准委员会主办&#xff0c;人大金仓与国家电子计算机质量检验检测中心&#xff08;北京尊冠科技有限公司&#xff09;联合承办的《基于医疗应用的国产关系型数据库能力评价规范》团体标准研讨会顺利召开。 “ 各大知名医院专家云集 深入…...

编程日记 2023/12/16 12:51:42

【UML】NO.1 UML简介

目录 一、什么是UML 二、UML和软件工程 三、UML的诞生 四、UML的基本构成 从今天开始&#xff0c;开一个新的话题&#xff0c;把UML梳理一遍。 一、什么是UML UML&#xff08;Unified Modeling Language,UML&#xff09;是一个通用的可视化建模语言标准&#xff0c;用于对…...

编程日记 2023/12/16 12:50:41

【Idea】SpringBoot项目中，jar包引用冲突异常的排查 / SM2算法中使用bcprov-jdk15to18的报错冲突问题

问题描述以及解决方法&#xff1a; 项目中使用了bcprov-jdk15to18 pom依赖&#xff0c;但是发现代码中引入的版本不正确。 追溯代码发现版本引入的是bcprov-jdk15on&#xff0c;而不是bcprov-jdk15to18&#xff0c;但是我找了半天pom依赖也没有发现有引入bcprov-jdk15on依赖。…...

编程日记 2023/12/16 12:48:39

MISRA C++ 2023：C和C++测试解决方案实现静态分析

自动化软件测试解决方案的全球领导者Parasoft今天宣布&#xff0c;随着Parasoft C/Ctest 2023.2即将发布&#xff0c;全面支持MISRA C 2023。Parasoft针对C和C软件开发的完全集成测试解决方案计划于2023年12月发布&#xff0c;可以帮助团队实现自动化静态分析和编码标准合规性&…...

编程日记 2023/12/16 12:45:37

半导体：Gem/Secs基本协议库的开发（4）

继续接上篇 《半导体&#xff1a;Gem/Secs基本协议库的开发&#xff08;3&#xff09;》&#xff0c;本篇我们分享的比较简单&#xff0c;windows系统下tcp和串口通讯。这也是我们协议开发比较重要的一部分&#xff0c;不过我们在此把它封装程一个单独的通讯库&#xff0c;毕竟…...

编程日记 2023/12/16 12:40:34

解锁知识的新大门：自建知识付费小程序的技术指南

在数字化时代&#xff0c;知识付费小程序的崛起为创作者和学习者提供了全新的学习和分享方式。本文将以“知识付费小程序源码”为关键词&#xff0c;从技术角度出发&#xff0c;为你展示如何搭建一个独具特色的知识付费平台。 步骤1&#xff1a;选择适用的知识付费小程序源码…...

编程日记 2023/12/16 12:33:27

Java8实战 - 行为参数化传递代码

背景&#xff1a; 根据《java8实战》把第二章简单概括一下。 在软件工程中&#xff0c;一个最重要的问题是&#xff0c;用户的需求会一直变化&#xff0c;如何应对不断变化的需求&#xff0c;并且把工作量降到最低是需要考虑的&#xff0c;而行为参数化就是一个处理频繁变更需…...

编程日记 2023/12/16 12:26:22

jmeter，取“临时重定向的登录接口”响应头中的cookie

1、线程组--创建线程组&#xff1b; 2、线程组--添加--取样器--HTTP请求&#xff1b; 3、Http请求--添加--后置处理器--正则表达式提取器&#xff1b; 4、线程组--添加--监听器--查看结果树&#xff1b; 5、线程组--添加--取样器--调试取样器。 首先理解 自动重定向 与跟随…...

编程日记 2023/12/16 12:25:21

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/12/5 12:19:33

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/12/4 5:36:33

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2025/12/2 9:17:52

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/12/5 11:32:08

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2025/12/6 6:15:23

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/10/2 9:17:52

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2025/11/28 21:49:04

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/11/20 18:21:59

全面解析数据库：从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

编程新知 2025/9/19 11:48:17

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2025/12/6 3:36:10