06 WebGL的坐标系统

最新推荐文章于 2023-08-03 11:32:44 发布
最新推荐文章于 2023-08-03 11:32:44 发布
阅读量3.8k 收藏
点赞数
分类专栏： WebGL 文章标签： webgl 坐标系统 三维
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30100043/article/details/70878160
版权

由于WebGL处理的是三维图形，所以它使用的是三维坐标系统（笛卡尔坐标系），具有x轴、y轴、z轴。

三维坐标系统很容易理解，因为我们的世界也是三维的：具有宽度、高度和长度。在坐标系统中，轴的方向非常重要。

WebGL采用的是右手坐标系，因为可以用右手来表示。

如图：


默认情况下WebGL和canvas的对应关系。

canvas的中心点就是WebGL的(0.0,0.0,0.0)

canvas的x轴左边缘和右边缘分别对应WebGL的x轴的-1.0和1.0

canvas的y轴上边缘和下边缘分别对应WebGL的y轴的1.0和-1.0

如图：


暮志未晚NAN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
webgl 坐标系_WebGL太阳系之旅：火星，第一部分
cungui5726的博客
08-24 184
webgl 坐标系In the previous article I introduced WebGL, and talked about why I’d be using threeJS to demonstrate the ability of WebGL to create native 3D content on web pages. In this article, I show you...
基于webGL的earth展示系统
01-10
1. **WebGL基础知识**：理解WebGL的基本原理，包括顶点坐标、颜色、纹理、光照、矩阵变换等。 2. **Three.js或其它库**：Three.js是最常用的WebGL库，它简化了WebGL的使用，提供了丰富的功能和预设对象，如地球模型...
WebGl-4.WebGl坐标系
qq_25064691的博客
09-11 842
WebGl使用的是三维坐标系统（笛卡尔坐标系），具有X轴、Y轴和Z轴。在WebGl中你面向计算机屏幕时，水平方向是X轴，垂直方向是Y轴，垂直于屏幕的是Z轴，如下图。 WebGl的坐标系和绘图区的坐标系不同，需要将前者映射到后者。WebGl坐标与坐标的对应关系如下。 的中心点：WebGl的（0.0，0.0，0.0） 的上边缘和下边缘：WebGl的(0.0，1.0，0.0)和(0.0，-1.0，0.0) 的左边缘和右边缘：WebGl的(-1.0，0.0，0.0)和(1.0，0.0，0.0) 将.
【WebGL】WebGL的坐标系统
Epps的博客
10-09 994
在WebGL中，默认的使用的是右手坐标系。x轴正方向向右，y轴正方向向上，z轴正方向朝向屏幕外。与<canvas>对应: 中心点是:(0.0, 0.0, 0.0) 上边缘是:(0.0, 1.0, 0.0) 下边缘是:(0.0, -1.0, 0.0) 左边缘是:(-1.0, 0.0, 0.0) 右边缘是:(1.0, 0.0, 0.0)
屏幕旋转之后的触摸坐标_WebGL 坐标系统
weixin_39710594的博客
12-05 236
前言 原本想打算直接介绍GLSL基础语法或者三维图形相关的内容，可是后来我想了想，不管是在WebGL系统还是在OpenGL系统中都有一个很重要的概念——坐标系统 在之前的文章中也提到过几个坐标系统，例如：纹理坐标系统、WebGL坐标系统等，可是这些都是相对笼统的概念，当所有物体进入到WebGL系统后都会遵循这些坐标系的标准 但是当进入到三维世界后，我们会面对更复杂的图形图像空间、更复杂的图形变化（...
WebGL中的各种坐标系
tts819372500的博客
06-13 648
webgl在绘制时，是在一个画布上进行绘制的，canvas标签的width，height属性为画布的宽高；style的width、height设置大于canvas标签的width，height属性时，相当于显示屏的分辨率很大，但画布的像素很低，显示时相当于将画布放大，会出现模糊现象。单图片对应的像素点在图片坐标系的坐标与对应点在纹理坐标系中的坐标相同，所以写UV坐标时，我们直接按照顶点对应的像素点在图片坐标系中的坐标来作为UV坐标即可。：左下角为原点（0，0），水平向右为x轴正方向，垂直向上为y轴正方向。
webgl之坐标系
05-04 1060
绘制图形，必须搞清楚坐标系，不然寸步难行。 参考： https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API https://blog.csdn.net/flycatdeng/article/details/82588903 在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面对屏幕，你的右边是x正...
WEBGL.rar_webgl
09-14
学习者需要学习如何加载、处理和应用纹理，包括不同类型的纹理坐标系统和过滤模式。 6. **光照和着色模型**：3D图形的真实感往往依赖于光照效果。WebGL支持各种光照模型，如环境光、漫反射光和镜面高光，以及不同的...
webGl编程指南书籍下载
最新发布
05-26
2. **几何形状与坐标系统**：WebGL的核心是向量和矩阵运算，书中会详细讲解如何定义和操作点、线、面等基本几何形状，以及如何利用坐标系统和变换矩阵进行物体的位置、旋转和缩放。 3. **颜色与光照**：颜色理论和...
WEBGL_gis_webgl_
10-03
3. **地理坐标系与投影**：GIS中的地理坐标系转换到WebGL的直角坐标系的过程，以及常见的投影方法，如Mercator投影。 4. **交互设计**：如何使用鼠标和触摸事件来实现地图的缩放、平移、旋转等交互功能，以及点击...
webgl-lib.rar
04-14
Cuon Matrix提供了一系列的函数，如矩阵的乘法、翻译、旋转、缩放等，帮助开发者更轻松地处理3D坐标系统中的对象。 2. **cuon-utils.js**: Cuon Utils可能是Cuon Matrix的扩展，包含了一些实用的辅助函数，如向量...
WEBGL 坐标系
Fly to sky
05-08 1038
就像任何其他的3D系统，在WebGL中Z轴表示深x，y和z轴。在WebGL的坐标被限制为(1,1,1)和(-1，-1，- 1)。它意味着- 如果你考虑该屏幕上投影的WebGL图形为立方体，则立方体的一个角将是(1,1,1)和相对的角为(-1，-1，-1)。 WebGL将不绘制显示任何超越这些界限。下图描述了WebGL的坐标系。 z轴表示深度。 z与正值表示该对象是在屏幕/观众近，而z的负值表示该对
WEBGL第四课-坐标系统
谷子的博客
07-18 1184
  在OpenGL里面其实有5个坐标的（分别为物体本身坐标、世界坐标、观察者坐标、裁剪坐标、屏幕...
WebGL坐标系介绍
TW934440653的博客
10-13 8809
@TOC初识webGL 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计...
WebGL坐标系及基础几何概念
Peter的博客
09-19 1086
右手坐标系 WebGL 和 threejs使用的是正交右手坐标系 且每个方向都有可使用的值的区间，超出该矩形区间的图像不会绘制： x轴最左边为-1，最右边为1； y轴最下边为-1，最上边为1； z轴朝向你的方向最大值为1，远离你的方向最大值为-1； 注：这些值与Canvas的尺寸无关，无论Canvas的长宽比是多少，WebGL的区间值都是一致的。 如图： 围绕某个轴旋转 左手大拇指，指向该轴的正方向，四指弯曲指向的方向，为该旋转方向的正方向。 世界坐标系与本地...
【愚公系列】2023年12月 WEBGL专题-坐标系
热门推荐
时光隧道
08-03 1万+
坐标系是一个用于确定物体或点在空间中位置的图形系统。坐标系由两条相互垂直的线段组成，分别称为x轴和y轴，它们交叉于原点（0,0）处。通过在x轴和y轴上选择合适的点（坐标），可以描述出点或物体在平面上的位置。在三维空间中，通常会加上第三条垂直于x轴和y轴的z轴，从而形成三维坐标系。坐标系在数学、物理、计算机科学等领域中都具有重要的应用。
webgl入门(3)-坐标系与鼠标交互
weixin_33997389的博客
12-25 1032
前言 这是webgl入门的第2节，内容包含weblg的坐标系和动态设置图形样式。 1. webgl坐标系统 由于webgl处理的是三维图形，所以它使用三维坐标系统。具有x轴、y轴、z轴。当你面对屏幕的时候，X轴是水平的（正方形向右），Y轴是垂直的（正方向向上（原文中有错）），而Z轴垂直于屏幕（正方向向外） 这套坐标系又叫右手坐标系。 如图所示，webgl的坐标系(原点在画布中间)跟canvas的...
玩转WebGL(五)变换与坐标系统
q641187432的专栏
02-09 874
1.变换 为了深入了解变换,我们首先要在讨论矩阵之前回顾一下最基础的数学背景知识. 1.1 向量 向量有一个方向和大小. 向量标量运算 向量加减运算 对应的直观表示加法: 直观表示减法: 向量长度 使用勾股定理即可 向量点乘 两个向量的点乘也叫向量的内积、数量积,对两个向量执行点乘运算,就是对这两个向量对应位一一相乘之后求和的操作 两个向量的点乘等于它们的数乘结果乘以两个向量之间夹角的余弦值 向量叉乘 叉乘只在3D空间中有定义,它需要两个不平行向量作为输入,生成一个正交于两个输入向量的第三
webgl坐标转换
qq_37987033的博客
09-19 1478
webgl虽然属于web端开发，但实际上已经进入图形学的范畴，因此，想要更高效的开发，不仅仅需要掌握扎实的前端基础，对一些webgl的底层原理也要有个基本的掌握，这样才能更高效的排查问题。文本将自己理解的坐标转换过程记录下来。
cesium 坐标转换
09-23
Cesium是一个WebGL库，用于地理信息系统的开发。在Cesium中，有几种常用的坐标转换方法可以使用。 1. 屏幕坐标转世界坐标： 使用以下代码将屏幕坐标转换为世界坐标： ```javascript var pick = new Cesium.Cartesian2(window.innerWidth, window.innerHeight); var cartesian = scene.globe.pick(viewer.camera.getPickRay(pick), scene); ``` 2. 世界坐标转屏幕坐标： 使用以下代码将世界坐标转换为屏幕坐标： ```javascript var pick = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian); ``` 3. 经纬度坐标转地理坐标（弧度）： 使用以下代码将经纬度坐标转换为地理坐标（弧度）： ```javascript var cartographic = Cesium.Cartographic.fromDegrees(longitude, latitude, height); ``` 4. 经纬度坐标转世界坐标： 使用以下代码将经纬度坐标转换为世界坐标： ```javascript var cartesian = Cesium.Cartesian3.fromDegrees(longitude, latitude, height); ``` 请告诉我还有什么可以帮助您的吗？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值