目录： 1.基本信息 2.示例工程 3.脚本 目标 这篇博客的主要目标是告诉你使用鼠标点击的位置拾取或放置对象的做法。 你最终会得到下面的效果： ?...你可以使用下面两种方式来完成这件事： 如果你正在做一个射击类游戏，为了找到对象被击中的位置，可以调用 hit.point 你可以使用鼠标的位置很容易转换成世界坐标的位置。...我们将会使用鼠标的位置把对象放置到世界坐标的位置。可以使用下面的函数来获得鼠标的位置：Input.mousePosition，这个函数返回了以像素的为单位的位置。所以我们需要把它转换成世界坐标的位置。...现在我们可以使用这个位置把对象放置在鼠标点击的地方。现在通过使用这个函数，我们会创建一个简短的演示程序。...在把对象放置在空间上时，保持按住鼠标左键按下移动对象的位置。 原文作者：Charmi Popat 原文链接
HTML5学堂：JavaScript获取鼠标的位置，大家会想到clientX/Y等属性，灵活的获取鼠标的位置信息，能够便于我们实现各种复杂的页面交互效果，到底还有哪些属性可以获取鼠标的位置信息？...另外，还有哪些能快速获取标签在页面中的位置信息？ 在书写一些“拖拽”页面交互效果，比如常见的拖拽效果、自定滚动条、放大镜等效果，都需要用到了鼠标或元素在页面上的位置信息。...为了能够快速、灵活的获取鼠标位置信息，今天要带着大家来接触的不是利用clientX/Y获取鼠标的位置信息，而是利用了大家可能比较少用的两个属性layerX/Y和offsetX/Y，它们与clientX/...另外，也要跟大家分享一个方法，它能快速的获取元素在页面上的位置信息，不同于之前学过的offsetLeft等属性，它就是——getBoundingClientRect()方法 回顾clientX/Y获取鼠标位置的方式...但是堡堡不说~ 兼容性：IE6/7/8不支持，IE9+和Chrome、Safari、Firefox都支持 友情提醒：在IE10+的浏览器，获取到的鼠标位置会存在一堆的小数，如39.66999816894531
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> New Docume...
核心API没有窗口系统、音频、打印、键盘/鼠标或其他输入设备的概念。虽然这一开始看起来像是一种限制，但它允许进行渲染的代码完全独立于他运行的操作系统，允许跨平台开发。...实现及规范 OpenGL的底层由C语言实现，专注于图形渲染处理，在3.2版本之前，OpenGL使用立即渲染模式(Immediate mode)，隐藏了底层的细节，容易使用和理解，但是效率太低；2009年...如果有接触过浏览器图形渲染的同学，那肯定熟悉WebGL，他就是基于OpenGL ES 2.0在Web浏览器中的进行3D渲染的API 移动端上除了OpenGL ES还常见到EGL(Embedded-System...OpenGL图形渲染管线的流程如右图，图形渲染管线的作用是将3D坐标转换为2D坐标（OpenGL中任何事物都是在3D空间中），将2D坐标转换为实际有颜色的屏幕像素点。...image.png 顶点数据(Vertex data) 顶点数据是一系列顶点的集合。一个顶点(Vertex)是一个3D坐标的数据集，包含位置数据、颜色等用户自定义的顶点属性。
作者 | 天元浪子 来源 | CSDN博文精选 【编者按】OpenGL（开放式图形库），用于渲染 2D、3D 矢量图形的跨语言、跨平台的应用程序编程接口，C、C++、Python、Java等语言都能支持...预备知识 OpenGL 是 Open Graphics Library 的简写，意为“开放式图形库”，是用于渲染 2D、3D 矢量图形的跨语言、跨平台的应用程序编程接口（API）。...最常用的投影有两种：平行投影和透视投影。如下图所示，F 是投影面，p1p2 为三维空间中的一条直线，p’1 和 p’2 分别是 p1 和 p2 在 F 上的投影，虚线表示投影线，O 为投影中心。 ?...从无限三维空间中裁切出来的可以显示在屏幕上的部分三维空间，我们称之为视景体。视景体有六个面，分别是左右上下和前后面。 对于平行投影而言，视景体是一个矩形平行六面体；对于透视投影来说，视景体是一个棱台。...对应在 OpenGL 中，也有同样的概念，即视点的位置、瞄准方向的参考点，以及（向上的）方向。 六、OpenGL 变换 下图是三维图形的显示流程。
OpenGL是个专业的3D程序接口，是一个功能强大，调用方便的底层3D图形库。OpenGL的前身是SGI公司为其图形工作站开发的IRIS GL。...1992年7月，SGI公司发布了 OpenGL的1.0版本，随后又与微软公司共同开发了Windows NT版本的OpenGL，从而使一些原来必须在高档图形工作站上运行的大型3D图形处理软件也可以在微机上运用...其中包括改进打印机支持，在增强元文件中包含OpenGL的调用，顶点数组的新特性，提高顶 点位置、法线、颜色、色彩指数、纹理坐标、多边形边缘标识的传输速度，引入了新的纹理特性等等。...OpenGL 2.0标准的主要制订者并非原来的SGI，而是逐渐在ARB中占据主动地位的3Dlabs。...只是其在3D图形方面的优秀表现，让它的其它方面显得暗淡无光。
OpenGL可以在多种不同的平台之上运行，并且与各种不同的窗口系统配合工作。它的设计目标是作为窗口系统的补充，而不是它们功能的重复。...因此，OpenGL在二维平面或三维空间中执行几何图形和图像的渲染，但是它并不对窗口进行管理，也不会处理输入事件。 ...窗口操作在每个系统上都是不一样的，OpenGL 有目的地将这些操作抽象（Abstract）出去。这意味着我们不得不自己处理创建窗口，定义 OpenGL 上下文以及处理用户输入。...在回调函数方式 中，用户提供给GLFW的回调函数用来处理用户输入操作如键盘按键或鼠标操作。当用户按下或者松开按键时，它都会被触发，包括一些特殊的键位（例如 Shift、Caps Lock、Esc等)。...Getting Started with OpenGL in 《Learning Modern 3D Graphics Programming》
渲染 SVG 自定义鼠标 实验性支持 Adobe Flash 页面检查器 编辑/删除 cookie 可自定义的鼠标/键盘输入 包括：鼠标点击、FPS 或 GUI 包括：VR（在 Windows 上测试过...通过绝对值或引用 Unity UI 元素的相对值来设置位置和大小 播放 YouTube，Vimeo 或本地视频 获取照片和上传 网页透明部分穿透点击，使用网页制作游戏 UI 查看我们的网站获取更多信息...第三款：Texture Web View (Android) Texture Web View (Android) 支持PC和移动端，也可以放置到世界空间中 具有3D效果 Texture Web View...第四款：Mobile Web View (Android, iOS) Mobile Web View 支持PC和移动端，可以在世界空间中显示3D效果 如果你曾经想将网站渲染到Unity纹理上，并在移动平台上与之互动...(快速本地纹理更新:金属和OpenGL图形API); 支持虚拟现实(硬纸板，Oculus); 支持渲染网站到2D或3D对象的可能性; 支持在同一时间渲染多个网站的可能性; 支持的可能性，以获得像素的当前页框架
OpenGL及其基础概念 OpenGL（Open Graphics Library）是一种跨平台的图形API，用于渲染2D和3D图形。...在图形编程中，经常需要处理来自不同来源和不同格式的3D模型，比如OBJ、FBX、Collada等。...相比于GLUT，FreeGLUT在功能上进行了一些改进和扩展，如支持多窗口、支持更多的键盘和鼠标事件、提供了更多的定时器函数等。...例如，一个典型的OpenGL应用可能会使用GLEW来管理OpenGL的扩展，GLFW来创建窗口和处理用户输入，GLM来进行数学计算，以及Assimp来加载和处理3D模型。...= 0; // 上一次鼠标X位置 int lastMouseY = 0; // 上一次鼠标Y位置 void init() { glClearColor(0.0f, 0.0f, 0.0f, 1.0f
OpenGL绘制过程 其实在OpenGL中，所有物体都是在一个3D空间里的，但是屏幕都是2D像素数组，所以OpenGL会把3D坐标转变为适应屏幕的2D像素。...而顶点数据是用顶点属性表示的，它可以包含任何我们常用数据，比如顶点的位置和颜色 我们可以观察上图，在OpenGL中的物体是有重多的顶点表示的三角形共同构成。...OpenGL坐标系变换的过程 之前我们已经提到在OpenGL中，所有物体都是在一个3D空间里的，但是屏幕都是2D像素数组，所以OpenGL会把3D坐标转变为适应屏幕的2D像素。...坐标变换的目标，简单来说，就是把一个3D空间中的对象最终投射到2D的屏幕上去。这也正是计算机图形学(computer graphics)所要解决的其中一个基础问题。...屏幕坐标是屏幕上任意一个点的精确位置，简单来说就是可以是任意小数，但像素的位置只能是整数了。这里的视口变换是从NDC坐标变换到屏幕坐标，还没有到最终的像素位置。
后记 1 预备知识 OpenGL 是 Open Graphics Library 的简写，意为“开放式图形库”，是用于渲染 2D、3D 矢量图形的跨语言、跨平台的应用程序编程接口（API）。...如下图所示，F 是投影面，p1p2 为三维空间中的一条直线，p’1 和 p’2 分别是 p1 和 p2 在 F 上的投影，虚线表示投影线，O 为投影中心。...从无限三维空间中裁切出来的可以显示在屏幕上的部分三维空间，我们称之为视景体。视景体有六个面，分别是左右上下和前后面。 对于平行投影而言，视景体是一个矩形平行六面体；对于透视投影来说，视景体是一个棱台。...对应在 OpenGL 中，也有同样的概念，即视点的位置、瞄准方向的参考点，以及（向上的）方向。 1.6 OpenGL 变换 下图是三维图形的显示流程。...对于有经验的程序员来说，一般先用glut理顺3D图形代码，然后再集成为完整的应用程序。
[ OpenGl ES1.0 渲染管线 ] 1.1.1 基本处理 该阶段设定3D空间中物体的顶点坐标，顶点对应颜色，顶点的纹理坐标等属性。并且之指定绘制方式：点绘制，线绘制，三角形绘制。...在绘制每一帧时就可以直接从缓冲对象中取顶点数据，一定程度上节省了GPU的IO带宽和提升渲染效率吧。 1.1.3变换和光照 顶点变换任务：对3D物体的各个顶点进行平移，旋转和缩放等操作。...图元处理：主要工作就是裁剪，消除半空间之外的部分几何图元。 之所以裁剪是因为随着观察位置，角度的不同，并不总能看到3D物体的某个图元的全部。...这时在屏幕上显示的就不再是三角形，而是经过裁剪后的多边形。如图所示： ? [ 从不同距离不同角度观察正四面体 ] 1.1.5光栅化 由于虚拟3D世界当中物体的几何信息一般采用连续的数学量来表示。...[ 易变变量工作原理 ] 首先顶点着色器在每个顶点中都对易变变量vPosition进行赋值，接着在片元着色器中接收到的易变变量vPosition其实并不是某个顶点赋的特定值，而是根据片元所在位置及图元中各个顶点的位置进行插值计算产生的值
1.2 WebGL WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。...二、Three.js应用场景 利用Three.JS可以制作出很多酷炫的3D动画，并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互，在页面上增加一些3D动画和3D交互可以产生更好的用户体验。...1）场景 场景是一个容器，可以看做摄影的房间，在房间中可以布置背景、摆放拍摄的物品、添加灯光设备等。 2）相机 相机是用来拍摄的工具，通过控制相机的位置和方向可以获取不同角度的图像。...6.1 点光源 点光源类似蜡烛放出的光，不同的是蜡烛有底座，点光源没有底座，可以把点光源想象成悬浮在空中的火苗，点光源放出的光线来自同一点，且方向辐射向四面八方，点光源在传播过程中有衰弱，如下图所示，点光源在接近地面的位置...，实现原理是这样的：创建一个球体构成一个球形的空间，把相机放在球体的中心，相机就像在一个球形的房间中，在球体的里面（也就是反面）贴上图片，通过改变相机拍摄的方向，就能看到全景视图了。
在我之前网上的博客都只有读取移动旋转单个3d模型的， 导致我根本查不到有关的资料，只能自己写了。 前人栽树，后人乘凉。 ...有了前面两篇的分部实现，掌握这次的就不难了： OpenGl读取导入3D模型并且添加鼠标移动旋转显示 OpenGl 实现鼠标分别移动多个物体图形 ----------移动一个物体另外一个物体不动--读取多个...一.读取3D模型 在3d图形处理中，一个模型(model)通常由一个或者多个Mesh（网格）组成，一个Mesh是可绘制的独立实体。...Mesh由顶点、边、面Faces组成的，它包含绘制所需的数据，例如顶点位置、纹理坐标、法向量，材质属性等内容，它是OpenGL用来绘制的最小实体。...， 三个参数分别是鼠标响应的事件类型，比如左键点击，右键点击之类，x,y则是当前鼠标在窗口的位置坐标。
大多数3D传感器输出点云——欧氏空间中无序的点集，这种数据类型的无序性质以及缺乏任何固定网格（如2D图像），使得很难简单地将成功的解决方案从2D计算机视觉提升到3D空间。...3D边界框，我们开发了labelCloud，这是一个轻量级和独立的标注工具，用于在3D点云中注释旋转的边界框。...的视图利用GPU的并行处理能力，并使用OpenGL实现流畅的可视化，在每个标记任务开始时传输点云数据，并使用投影矩阵实现任何转换，此设置允许使用标准计算机硬件流畅地注释通常较大的点云文件（通常约为10万点...特别是在未着色的点云中，定位和识别对象可能需要很长时间，完成后，用户必须输入对象类并创建初始边界框，虽然只需单击两次即可跨越2D边界框，但对于3D边界框，必须指定对象位置、大小和旋转。...一旦指定了位置，所有其他参数都可以自由调整，通过生成模式，我们尝试将常用的2D标记方法提升到3D空间，用户不用选择两个相对的矩形角，而是通过四次单击跨越3D边界框。
概览(Overview) 电脑显示屏是一个2D平面,为了能够在这个2D平面上显示OpenGL渲染的3D场景,我们必须将3D场景当作2D图像投影到这个2D平面(计算机屏幕)上.GL_PROJECTION...透视投影 在透视投影中,视锥体(观察空间)中的一个3D坐标点会被映射到一个立方体中(NDC);其中 xxx 坐标范围会从 [l,r][l, r][l,r] 映射到 [−1,1][-1, 1][−1,1]...这里需要注意的是,观察空间是在右手坐标系下(OpenGL 使用右手坐标系)定义的,但是 NDC 却是在左手坐标系下定义的.换句话说就是,观察空间中的摄像机是指向 -Z 轴的,但是在 NDC 中,摄像机指向的却是...:因为在观察空间中,摄像机是指向 -Z 轴的)....在 OpenGL 中,观察空间中3D坐标点是投影到近裁剪面(即投影面)上的.下面的示意图展示了一个在观察空间中的坐标点 (xe,ye,ze)(x_e, y_e, z_e)(xe,ye,ze),是如何投影到近裁剪面坐标点
1.2 WebGL WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。...二、Three.js应用场景 利用Three.JS可以制作出很多酷炫的3D动画，并且Three.js还可以通过鼠标、键盘、拖拽等事件形成交互，在页面上增加一些3D动画和3D交互可以产生更好的用户体验。...1）场景 场景是一个容器，可以看做摄影的房间，在房间中可以布置背景、摆放拍摄的物品、添加灯光设备等。 2）相机 相机是用来拍摄的工具，通过控制相机的位置和方向可以获取不同角度的图像。...6.1 点光源 点光源类似蜡烛放出的光，不同的是蜡烛有底座，点光源没有底座，可以把点光源想象成悬浮在空中的火苗，点光源放出的光线来自同一点，且方向辐射向四面八方，点光源在传播过程中有衰弱，如下图所示，点光源在接近地面的位置...这个例子是通过在球形几何体的反面进行纹理贴图实现的全景视图，实现原理是这样的：创建一个球体构成一个球形的空间，把相机放在球体的中心，相机就像在一个球形的房间中，在球体的里面（也就是反面）贴上图片，通过改变相机拍摄的方向
GPU采用流式并行计算模式，可对每个数据进行独立的并行计算，所谓“对数据进行独立计算”，即，流内任意元素的计算不依赖于其它同类型数据，例如，计算一个顶点的世界位置坐标，不依赖于其他顶点的位置。...中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变为适应你屏幕的2D像素。...标准化设备坐标 开始绘制图形之前，我们必须先给OpenGL输入一些顶点数据。OpenGL是一个3D图形库，所以我们在OpenGL中指定的所有坐标都是3D坐标（x、y和z）。...OpenGL不是简单地把所有的3D坐标变换为屏幕上的2D像素；OpenGL仅当3D坐标在3个轴（x、y和z）上都为-1.0到1.0的范围内时才处理它。...比如我们希望渲染一个三角形，我们一共要指定三个顶点，每个顶点都有一个3D位置。我们会将它们以标准化设备坐标的形式（OpenGL的可见区域）定义为一个float数组。
在Linux下，有显卡生产商提供的OpenGL库，也有一些爱好者改编的版本。...中，任何事物都在3D空间中，而屏幕和窗口却是2D像素数组，这导致OpenGL的大部分工作都是关于把3D坐标转变为适应你屏幕的2D像素。...image.png 标准化设备坐标 开始绘制图形之前，我们必须先给OpenGL输入一些顶点数据。OpenGL是一个3D图形库，所以我们在OpenGL中指定的所有坐标都是3D坐标（x、y和z）。...OpenGL不是简单地把所有的3D坐标变换为屏幕上的2D像素；OpenGL仅当3D坐标在3个轴（x、y和z）上都为-1.0到1.0的范围内时才处理它。...比如我们希望渲染一个三角形，我们一共要指定三个顶点，每个顶点都有一个3D位置。我们会将它们以标准化设备坐标的形式（OpenGL的可见区域）定义为一个float数组。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
