这一章比较简单,主要讲如何移动和旋转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是Google开发的基于web的3d编程API,因文件太大分三次上传
o3d goolge javascript texture graph
在o3d-webgl-pool项目中,JavaScript不仅负责处理用户交互,还与WebGL接口紧密结合,生成和操控3D模型,实现台球的碰撞检测和物理运动模拟。 WebGL是一种基于OpenGL标准的JavaScript API,允许开发者在浏览器上创建...
使用 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模型,从而增强用户体验,特别是在产品设计、游戏开发、虚拟现实等领域有着广泛应用。通过深入理解和实践,开发者可以...
O3D是一款基于WebGL的开源3D图形库,它允许开发者在网页上创建复杂的3D场景和应用。这个库在Googlecode上曾被广泛使用和开发,但在googlecode退役后,该项目被迁移至其他平台以保持其活力。O3D的目标是提供一个高...
根据分子和离子共存理论,建立了CaO-Al2O3 和CaO-SiO2-Al2O3 渣系的活度计算模型,并利用模型对渣中各组元的活度进行了计算,分析了 w (CaO )对渣中组元活度的影响.结果表明,在 CaO-Al2O3 渣系中,当w(CaO)小于45%时,...
RotationMatrix 类允许处理具有不同参数化的 3D 旋转矩阵: -[3x3]旋转矩阵- 欧拉角- 指数图- 四元数一旦从上述参数化之一创建了 RotationMatrix 实例, 所有参数化都可以互换获得。 额外的静态方法允许在不创建实例...
然后,在代码中导入Open3D库:`import open3d as o3d`。 2. 数据类型:Open3D主要处理两种基本数据类型——点云(Point Cloud)和三维网格(Triangle Mesh)。点云是3D空间中离散点的集合,而三维网格则是由多个...