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

techbrood 发表于 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(24) views25392 comments2

发送私信

最新评论

㌍㌫㌶㍊㍍㍑㌫㌶㍍㌫㌍ 2020-07-25 17:52:25

收藏了


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

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


请先 登录 再评论.
相关文章
  • html5跨平台实战-第一周-水平测验-新闻列表页面

    这是一个DIV+CSS布局页面的一个实例,主要介绍POSITION定位、导航UL LI的制作、利用浮动原理对页面分栏、分列的页面布局。新闻页面的效果图

  • 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...

  • CSS3原生变量(Native Variables)新特性简介

    对Web开发者来说,一个盼望已久的特性是CSS终于支持原生变量了!
    变量是程序语言中用来解决代码重复和进行表达式计算的关键概念(想想数学方程式中的x)。...

  • HTTP1.1协议现状、问题和解决方案

    HTTP的现状最早的HTTP协议非常简单,只能用来传送文本,方法也只有GET,后来逐步发展到1.1,能够支持多种MIME格式数据(如文本、文件),支持GET,POST,HEAD,OPTI...

  • HTML5、Hybrid APP、Native APP对比和技术选型

    HTML5和Native APP都很容易理解。为了获得HTML5的移植性和移动本地应用的高性能,搞出来一些混合APP的解决方案。比如Apache的Cordova(也就是以前的PhoneGap),...

  • Babylon.js入门教程和开发实例

    Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...

  • 使用SVG和CSS3创建圆形进度条动画

    圆形进度条是一个经典的控制面板元素,常用于显示任务进度,比如用户档案的完整程度,或者升级状态。有很多方法来实现圆形进度条,比如用JS, CSS3, Canvas, SVG...

  • 深入理解Three.js(WebGL)贴图(纹理映射)和UV映射

    本文将详细描述如何使用Three.js给3D对象添加贴图(Texture Map,也译作纹理映射,“贴图”的翻译要更直观,而“纹理映射”更准确。)。为了能够查看在线演示效...

  • 三维向量的简单运算和实用意义

    在WebGL的实际应用中我们广泛使用向量的几何运算来计算角度、距离,判断点线、点面之间的关系,比如物体之间的碰撞检测。本文简要介绍三维计算机图形学中常用的...

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

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

  • 如何使用WebGL创建一个逼真的下雨动画

    之前写过文章来分别讲解如何使用CSS3和Canvas2D实现过雨滴和下雨动画。通过背景处理看起来也有视觉上的3D效果,但并非真正的3D场景,如果要加入用户交互,进行36...

  • jQuery Ribbles - 基于WebGL的水面涟漪动效插件

    使用jQuery

  • 如何使用纯CSS3实现一个3D泡沫

    要实现一个逼真的泡沫,涉及到比较复杂的光学/物理学知识。我们这里先简化下问题,实现一个相对简单而足够实用的泡沫元素。我们可以把基础的泡沫元素应用在很多场景中,比如水景、泡咖啡、啤酒甚至火焰特效中。泡沫首先是一个圆形元素.bubble

  • 更多...