WebGl几何对象的变换（附旋转正方形示例代码）

最新推荐文章于 2024-10-18 22:24:49 发布
最新推荐文章于 2024-10-18 22:24:49 发布
阅读量640 收藏 2
点赞数 1
文章标签： WebGl 几何对象的变换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/caiji_is_studying/article/details/103442855
版权

在这里，我们把几何对象的变换用矩阵变换的形式给出，方便大家理解。

1.平移操作。

在这里插入图片描述

2.二维旋转，假设绕原点旋转θ度。

在这里插入图片描述

3.1三维旋转，绕X轴旋转，X坐标不变。

在这里插入图片描述

3.2三维旋转，绕Y轴旋转，Y坐标不变。

在这里插入图片描述

4.缩放，原点不动，沿坐标轴伸缩。

在这里插入图片描述

5.绕Y轴旋转角计算。

最低0.47元/天 解锁文章
peaceGPT
关注
Vue2 - 实现网页3D立体旋转地球功能，三维球体旋转并且自动匀速滚动，支持鼠标缩放拖拽移动观察3d地球交互效果，vue利用Three构建三维地球旋转特效动画（详细示例代码，一键复制运行，自由扩展）
王二红
12-26 5786
vue2，nuxt2，绘制3D三维地球，Vue2炫酷可旋转的3D地球，三维球体3D旋转，可转动的地球模型，3d旋转球体，用Vue和three.js创建的旋转地球演示页面，Vue中实现3D得球自动旋转，可以拖动查看地球其他面，VUE大屏可视化3D地球旋转，能用鼠标缩放，用鼠标拖动拖拽地球，如何利用Three.js做一个立体地球展示，3D类地球在vue中的使用，vue实现3D地图模型，环绕效果，中国地图，不用显示省市区只需要地球样子就行，vue使用three用图片做旋转地球，案例3D地球（vue+three.j
用webgl绘制一个彩色旋转立方体
Bruce_wjh的博客
07-05 6439
用webgl绘制一个彩色旋转立方体今天给大家分享一个用webgl写的简单的三维场景：转动的交互式彩色立方体，其六个面的颜色都不一样。 上次绘制二维彩色矩形时讲到，二维是三维场景的特殊情况，所以由二维向三维拓展也并不难，webgl里面提供了画三角形的方法，立方体有6个面，一个面由两个三角形组成，共计需要12个三角形，每个三角形又有3个顶点，故绘制立方体需要36个点，而实际上立方体只有8个顶点，这8
[IG]WebGL旋转正方形
土豆大叔的博客
03-04 691
注明 该代码源于Interactive Computer Graphics Edward Angel and Dave Shreiner Eighth Edition, Pearson Education, 2020 为更好理解此代码，仅添加部分注释 WebGL 旋转正方形HTML文件JavaScript文件 大概思路 HTML文件中，正方形在平面上旋转，就相当于是在空间中绕Z轴旋转，那么，x和y坐标的变化可以根据 绕Z轴旋转的计算公式得出： xnew=−sinθ∗yold+cosθ∗xoldx_.
WebGL学习系列-基本图形变换
yanyan19880509的专栏
02-22 2149
经过前面的学习，我们已经可以绘制基本的图形了。本小节将介绍基本的图形变换，介绍在WebGL中，如何对基本的图形进行平移、旋转和缩放。
WebGL着色器绘制正方形
weixin_30369041的博客
02-28 140
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="lib/webgl-debug.js"><...
WebGL 图形变换理论篇
LiJiahaoCoder的博客
08-30 263
齐次坐标 简介 说到图形的几何变换，就离不开“齐次坐标”这个神奇的东西，所谓“齐次坐标”，就是将一个原本n维的向量用一个n+1维的向量来表示。比如向量：(x1,x2,...,xn)(x_1, x_2, ..., x_n)(x1​,x2​,...,xn​) 的齐次坐标可表示为： (hx1,hx2,...,hxn,h)(hx_1, hx_2, ..., hx_n, h)(hx1​,hx2​,...,hxn​,h)。 其中h是一个实数。显然一个向量的齐次坐标的表示是不唯一的，齐次坐标中的h取不同的值都表示的是同一
WebGL编程示例：立方体旋转及面内正方形移动效果
1. WebGL基础结构：了解WebGL程序的基本结构包括初始化WebGL上下文，设置视图投影矩阵，以及创建并使用顶点缓冲对象（VBOs）和索引缓冲对象（IBOs）来存储和绘制几何图形。 2. 着色器编程：掌握GLSL（OpenGL ...
WebGL编程指南 - 绘制和变换三角形
最新发布
zaizai1007的博客
10-18 503
绘制和变换三角形
WebGL
qq_34754747的博客
12-28 2388
效果较差：较于桌面开发API：Direct3D、OpenGL、UE、Unity。开发成本：熟悉并掌握一定的数据知识，例如：线性代数。硬件要求：开发及部署系统硬件要求较高，尤其GPU。
《WebGL编程指南》笔记之第三章绘制正方形
ttod的博客
01-27 975
这里首先贴出其第三章绘制正方形代码的简化版本（为了阅读流畅性，去除了一些错误判断）： var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' + 'void main() {\n' + ' gl_Position = a_Position;\n' + '}\n'; var FSHADER_SOURCE = 'void main() {\n' + ' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0)
图形的五种变化代码（平移，对称，旋转，变比，错切）
05-10
本代码可运行，但主函数中的图形点是静态的，所以参数传递也是静态的，该代码还需要改正。如有好的方法，请告诉我，万分感谢
3d旋转相册代码源码_WebGL实现3d渲染
weixin_39959298的博客
11-12 721
WebGL（Web图形库）是一个JavaScript API，可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形，而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0非常一致的API来做到这一点，该API可以在HTML5<canvas>元素中使用。 这种一致性使API可以利用用户设备提供的硬件图形加速。WebGL本身相对比较繁琐，但一些优秀的js库简化了该流程，...
计算机图形学正方形简单旋转,计算机图形学之二维平移旋转缩放代码
weixin_42153793的博客
07-24 1447
以下均为MFC工程代码代码一：简单实现void CGeotranView::Onyuantu(){// 原图，画三角形CDC *pDC=GetDC();pDC->MoveTo(100,100);pDC->LineTo(200,50);pDC->LineTo(200,150);pDC->LineTo(100,100);ReleaseDC(pDC);}void CGeotran...
WebGL编程（4）-基本图形和基本变换
凌风子夜
08-29 306
基本图形的绘制和顶点的绘制差不多，只需要设置gl.drawArrays()的mode参数对应的值。 gl.drawArrays(mode, first, count) mode的可选参数详解 基本图形 mode参数 描述 点 gl.POINTS 一系列点，绘制在v0,v1,v2…处 线段 gl.LINES 一系列单独的线段，绘制在（v0,v1）、（v2,v3）、（v4,v5）…...
绘制一个立方体—WebGL旋转变换
u014291990的博客
11-24 1667
绘制一个立方体—WebGL旋转变换 本文是WebGL电子书的1.5节内容 实现的基本思路很简单，首先提供如上图所示立方体线框所有顶点的三维坐标，然后通过旋转矩阵对所有顶点进行旋转变换，最后调用绘制函数gl.drawArrays把所有点连成线渲染出来。 通过第1.3、1.4两节课案例知道，显示器上显示的实际上是平面的像素，可以简单理解为三维几何体放在你眼睛和显示器之间，几何体在显示器上的投影，视线...
WebGL入门(十八)-三维视图通过上下左右键改变视点实现视图的移动
点燃火柴的博客
03-22 675
通过上下左右键改变视点实现视图的移动1.demo效果2.实现要点2.1 注册键盘按下事件2.2 键盘按下处理函数2.2 draw()函数实现3. demo代码 1.demo效果 如上，通过上下左右键调整视图矩阵的视点坐标实现图形的移动。 2.实现要点 2.1 注册键盘按下事件 //注册上下左右键盘按下事件 document.onkeydown = function (ev) { keydown(ev, gl, n, u_ViewMatrix, viewMatrix) } 2.2 键盘按下处理函数 /
webgl中通过键盘方向键，改变视图矩阵
webMinStudent的博客
12-26 525
1. webgl中通过键盘方向键，改变视图矩阵 这个很简单。 通过键盘监听事件，在相应的键位上修改视图矩阵的对应的分量。 document.onkeydown = function(e) { keydown(e); } let x = 0.20; let y = 0.25; const keydown = (e) => { if (e.keyCode === 38) {
webgl——绘制一个旋转的彩色立方体（四）
jiegiser博客
03-06 1249
文章目录前言一、整体代码以及实现效果二、绘制步骤1.构建顶点数据2.通过顶点索引构建立方体总结 前言 前面文章介绍了如何通过多点来绘制图形，通过建立缓冲区对象，将多个数据传入到缓冲区中；然后 webgl 进行读取缓冲区中的数据进行渲染。上个例子绘制 “F” 的坐标点不是很多；但是如果我们绘制一个立方体。如果还跟之前一样的绘制方式；立方体的每一个面由两个三角形组成，每个三角形有三个顶点，所以每个月需要有六个顶点，那么顶点数据需要有 36 个，我们会发现其实我们只需要用 8 个顶点来进行绘制立方体，但是如何
WebGL实现立方体旋转动画
u014291990的博客
11-25 1749
立方体旋转动画 本文是WebGL电子书的1.10节内容 要通过WebGL渲染出立方体旋转的动画效果，你首要了解“帧”这个概念，比如你观看的视频其实就是一帧一帧的图片连续播放的效果，只要图片刷新的频率的不是太低，人的眼睛都不会察觉，一般30~60FPS就可以。 WebGL如何产生一帧一帧的图片，这个很简单，执行一次绘制函数gl.drawArrays()，WebGL图形系统就会通知GPU渲染管线处理顶...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值