这一章比较简单,主要讲如何移动和旋转3D 空间中的物体,主要用到transform 对象其中的一些函数,在介绍这些函数之前,先介绍世界坐标系和局部坐标系。世界坐标系顾名思义就是以整个世界为坐标系,而局部坐标系则是以要变换的物体为中心的坐标系,其中物体绘制时各个顶点的坐标都是以这个局部坐标系为参照的,而进行移动变换时,则是以世界坐标系为参照,然后移动这个局部坐标系。进行旋转时也是绕着局部坐标系转的。
下面介绍一下几个常用的变换函数,最后再改动一下上一章的例子,加入一些变换
1.(transformObject).translate(X, // 在X 轴上移动的距离
Y , // 在Y 轴上移动的距离
Z , // 在Z 轴上移动的距离)
这个函数就是用来平移局部坐标系(即你要移动的物体),注意每次移动都是相对于上一次的 。
2. (transformObject).rotateX(degree) // 绕X 轴旋转degree 个角度
3. (transformObject).rotateY(degree) // 绕Y 轴旋转degree 个角度
4. (transformObject).rotateZ(degree) // 绕Z 轴旋转degree 个角度
这三个函数是用来旋转物体的,注意物体旋转是绕着局部坐标系的X,Y,Z 轴来旋转地,而不是世界坐标系。
5. (transformObject).identity();
这个函数是把所有变换都重置,其实就是把所有变换的矩阵单位化,因为前面的不管是旋转还是移动的变换就是一个矩阵,这个物体的所有顶点坐标都乘以这个矩阵,就实现了变换,而矩阵单位化后,就相当于没有乘以这个矩阵,也就是没有做变换。
下面来讲一下一个物体被投到视口上时到底要乘多少次矩阵(非常感慨当初线性代数没学好),首先是模型变换,即上面讲到的物体的移动和旋转,进行模型变换后再是视图变换,何谓视图变换,因为O3d 中lookat 这个函数,你的眼睛可以在不同位置通过不同角度看这个物体,为了达到这种效果,这些坐标还得进行一次变换。从而形成错觉让人感觉是从那个位置看出去的,其实视图变换时模型变换的逆变换,视图变换能达到的模型变换逆着来后都能达到,最后就是投影变换了,把一个三维的世界投到一个二维的屏幕上。
下面就实战一下。让上一章那个立方体能够旋转起来。这个都写在renderCallBack 函数里面吧,这个函数是一个回调函数,每次重绘都要调用这个函数,这里重绘并不是说在改动一个物体才需要重新绘制,而是每隔一个很短的时间都需要重新绘制,也就是说每隔一个很短的时间就要调用这个函数,所以把旋转的变换放在这个函数里面,每次旋转角度递增,就能达到让立方体旋转起来的效果,话不多说,下面看这个函数。
function renderCallback(renderEvent) {
g_clock += renderEvent.elapsedTime;
// Rotate the cube around the Y axis.
g_cubeTransform.identity();
g_cubeTransform.rotateY(2.0 * g_clock);
}
(g_cubeTransform 由于是在initStep2 里定义的,所以得声明成全局变量。)
很精简,g_clock 是一个全局变量,初始值为零,一直递增,而立方体的变换则是先摆回原来样子,然后转动2*g_clock 个角度,由于g_clock 一直增大,所以给人错觉就是立方体一直在转。
当然有更简单的方法,可以不用g_clock ,因为上面提到过每次旋转都是相对于上一次的,所以每次都不重置,而是相对于上一次转动一个固定的值;
function renderCallback ( renderEvent ) {
g_cubeTransform . rotateY ( 2 );
}
然后在initStep2 中设置这个回调函数
g_client.setRenderCallback(renderCallback);
我们惊奇地看到,恩,惊奇地看到,那立方体转起来了,充满了青春与活力。
分享到:
相关推荐
综上所述,"O3D 物体编辑器"是一个基于O3D库的3D模型编辑工具,它在Firefox浏览器中实现了3D物体的拖动和旋转操作,为Web上的3D创作和交互提供了强大支持。开发者和设计师可以利用这个工具,轻松地在Web页面上创建和...
在3D-o3d.zip这个压缩包中,我们看到的是Objective-3D视频游戏引擎的相关资料,这是一个专门用于3D游戏开发的工具。 Objective-3D游戏引擎,以其强大的功能和灵活性,为开发者提供了构建逼真3D游戏环境的可能性。它...
O3D的核心是基于OpenGL的硬件加速图形API,这使得它在支持的浏览器(主要是Chrome和Internet Explorer 8)中能够提供流畅的3D体验。 在"谷歌O3D的javascript源码"中,我们可以深入学习以下关键知识点: 1. **...
3DS是一种广泛使用的三维建模软件3ds Max导出的文件格式,而O3DTGZ是O3D(Open 3D Engine)框架下的压缩文件格式,它包含了模型数据、纹理和其他相关资源,便于在O3D环境中高效加载和使用。 首先,我们需要了解3DS...
2. **Effect 效果**:效果是O3D中用于定义物体外观的组合,包括顶点着色器和像素着色器。顶点着色器负责处理3D模型的顶点信息,将本地坐标转换为屏幕坐标,并进行光照和其他基于顶点的计算。像素着色器则根据顶点...
2. **加载模型和资源**:使用 `o3djs.asset` 相关的函数加载 3D 模型、纹理和其他资源。 3. **设置视图**:定义相机的位置、视角和方向,以便用户可以看到场景。 4. **渲染循环**:设置一个定时器,定期调用渲染函数...
google开发的web3d编程APT o3d.提供的各种3d效果例子,因文件太大,分三个包传上
o3d是Google开发的基于web的3d编程API,因文件太大分三次上传
o3d lib1 graph javascript ajax
在o3d-webgl-pool项目中,JavaScript不仅负责处理用户交互,还与WebGL接口紧密结合,生成和操控3D模型,实现台球的碰撞检测和物理运动模拟。 WebGL是一种基于OpenGL标准的JavaScript API,允许开发者在浏览器上创建...
o3d是Google开发的基于web的3d编程API,因文件太大分三次上传
根据分子和离子共存理论,建立了CaO-Al2O3 和CaO-SiO2-Al2O3 渣系的活度计算模型,并利用模型对渣中各组元的活度进行了计算,分析了 w (CaO )对渣中组元活度的影响.结果表明,在 CaO-Al2O3 渣系中,当w(CaO)小于45%时,...
o3d goolge javascript texture graph
使用 Open3D 读取 3D 文件,可以使用 `o3d.io.read_point_cloud` 函数,例如: ```python import open3d as o3d import numpy as np pcd = o3d.io.read_point_cloud(r"data\bunny10k.ply") ``` 可视化 3D 模型 ...
总的来说,"o3dv_0.8.3.zip" 提供了一套完整的解决方案,使Web开发者能够轻松地在网页中展示3D模型,从而增强用户体验,特别是在产品设计、游戏开发、虚拟现实等领域有着广泛应用。通过深入理解和实践,开发者可以...
实现Open3D窗口在PyQt中的嵌入,首先需要熟悉Qt的信号和槽机制,因为这是PyQt中不同组件之间通信的主要方式。嵌入过程可能涉及创建一个自定义的QWidget,然后在该Widget中嵌入Open3D的渲染窗口。这通常通过使用...
《斯坦福兔子3D模型:探索点云配准与表面重建技术》 在计算机图形学领域,3D模型的创建和处理是一...通过深入研究和利用这个模型,我们可以更好地理解和掌握这些技术,从而在未来的3D建模和相关应用中取得更大的突破。
该工具提供了直观的界面,用户可以通过鼠标操作进行缩放、平移和旋转视角,以全方位地查看3D对象。 ### 1. Online3DViewer简介 - **官方网站**:提供了一个平台,用户可以直接上传或通过示例来体验3D模型的查看...