Three.js 对象局部坐标转换为世界坐标

iefreer 发表于 2016-08-03 10:26:26

标签: threejs, 坐标, 变换

- +

在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。

比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的坐标是局部坐标(Local Matrix),即相对于该对象的position属性而言的相对坐标。

当出现旋转、平移、设置位置(position)等变换时,需要相应更新世界坐标。当需要和外部粒子对象进行比较计算时,也需要转换为世界坐标(World Matrix)。


在Three.js r78版本中,我们可以如下操作:

1. 首先确保对象的矩阵已被更新:

object.updateMatrixWorld();

默认情况下会自动更新,在render循环中被自动调用。


2. 使用更新后的世界坐标变换矩阵来计算:

var vector = object.geometry.vertices[i].clone();
vector.applyMatrix4( object.matrixWorld );

这样vector中保存的就是世界坐标了。

possitive(2) negative(0) views7064 comments1
私信 收藏 分享
分享到

发送私信

最新评论

壹身傲骨怎能服输 2016-10-28 14:30:02

www.zbboke.com 张兵博客 到此一游


请先 登录 再评论.
相关文章
  • 测试2

    试试 阿瑟斯

  • 谷歌ARCore技术特性简介

    谷歌美国时间2017.8.29号刚发布了ARCore预览版,这是一个类似于苹果ARKit的增强现实SDK,在此之前,谷歌虽然已投资AR平台Tango,但由于需要特定的硬件和传感器,...

  • 如何使用BabylonJS加载OBJ或STL模型

    BabylonJS(也就是babylon.js,这是一个和three.js类似的WebGL开发框架),更多的用在游戏领域。
    本文说明和演示如何使用babylon.js来加载一个标准3d模型文...

  • WebGL Roadmap

    Unity 5.0 shipped with a working preview of our WebGL technology in March this year. Since then, Google has disabled (by default) NPAPI support in the...

  • 深入理解JS和CSS3动画性能问题和技术选择

    本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...

  • 使用HTML5 FileReader和Canvas压缩用户上传的图片

    手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力。因此在某些应用下(对图片要求不那么高)我们可以在客户端来压缩图片,然后再提交给服务器。总体...

  • 粒子运动模拟 - Verlet积分算法简介

    Verlet算法是经典力学(牛顿力学)中的一种最为普遍的积分方法,被广泛运用在分子运动模拟(Molecular Dynamics Simulation),行星运动以及织物变形模拟等领域...

  • Three.js入门教程4 - 创建粒子系统动画

    嗨,又见面了。这么说我们已经开始学习Three.js了,如果你还没有看过之前三篇教程,建议你先读完。如果你已经读完前面的教程了,你可能会想做一些关于粒子的东西。让我们直面这个话题吧,每个人都爱粒子效果。不管你是否知道,你可以很轻易地创建它们。

  • Three.js入门教程2 - 着色器(上)

    之前我已经给出了一篇

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • 在PHP网页程序中执行Sass/Compass命令

    我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...

  • 更多...