Three.js获得世界坐标.getWorldPosition()

Three.js获得世界坐标.getWorldPosition()

本文是Three.js电子书的6.3节

通过前两节课的学习相比你对Threejs的层级模型有了一定认识,那么本节课就在层级模型概念的基础给家建立本地坐标系和世界坐标系的概念。

如果你对本地坐标系和世界坐标系已经有了一定概念,那么可以直接访问模型的位置属性.position获得模型在本地坐标系或者说模型坐标系下的三维坐标,通过模型的.getWorldPosition()方法获得该模型在世界坐标下的三维坐标。

.getWorldPosition()方法

模型对象的方法.getWorldPosition()方法和位置属性.position一样继承自基类Object3D

// 声明一个三维向量用来保存世界坐标
var worldPosition = new THREE.Vector3();
// 执行getWorldPosition方法把模型的世界坐标保存到参数worldPosition中
mesh.getWorldPosition(worldPosition);

建立世界坐标系概念

如果你没有本地坐标系和世界坐标系的概念,可以通过下面的案例源码很快的建立两个坐标系的概念。

你首先在案例中测试下面源码,通过位置属性.position.getWorldPosition()分别返回模型的本地位置坐标和世界坐标,查看两个坐标x分量有什么不同。你可以看到网格模型mesh通过位置属性.position返回的坐标x分量是50,通过.getWorldPosition()返回的坐标x分量是100,也就是说mesh的是世界坐标是mesh位置属性.position和mesh父对象group位置属性.position的累加。

var mesh = new THREE.Mesh(geometry, material);
// mesh的本地坐标设置为(50, 0, 0)
mesh.position.set(50, 0, 0);
var group = new THREE.Group();
// group本地坐标设置和mesh一样设置为(50, 0, 0)
// mesh父对象设置position会影响得到mesh的世界坐标
group.position.set(50, 0, 0);
group.add(mesh);
scene.add(group);

// .position属性获得本地坐标
console.log('本地坐标',mesh.position);

// getWorldPosition()方法获得世界坐标
//该语句默认在threejs渲染的过程中执行,如果渲染之前想获得世界矩阵属性、世界位置属性等属性,需要通过代码更新
scene.updateMatrixWorld(true);
var worldPosition = new THREE.Vector3();
mesh.getWorldPosition(worldPosition);
console.log('世界坐标',worldPosition);

总结

下面对上面的案例实验进行总结。

所谓本地坐标系或者说模型坐标系,就是模型对象相对模型的父对象而言,模型位置属性.position表示的坐标值就是以本地坐标系为参考,表示子对象相对本地坐标系原点(0,0,0)的偏移量。

前面两节课说过Threejs场景Scene是一个树结构,一个模型对象可能有多个父对象节点。世界坐标系默认就是对Threejs整个场景Scene建立一个坐标系,一个模型相对世界坐标系的坐标值就是该模型对象所有父对象以及模型本身位置属性.position的叠加。

本地缩放系数.scale

通过前面的论述,模型的位置属性.position可以称为本地坐标或者说局部坐标,对于属性.scale一样,可以称为模型的本地缩放系数或者局部的缩放系数,通过.getWorldScale()方法可以获得一个模型的世界缩放系数,就像执行.getWorldPosition()方法一样获得世界坐标,关于.getWorldScale()方法可以查看基类Object3D

本地矩阵.materix和世界矩阵.matrixWorld

如果你对WebGL顶点的旋转、缩放、平移矩阵变换有一定的了解,可以继续阅读,如果没有概念也可以暂时跳过。

本地矩阵.materix是以本地坐标系为参考的模型矩阵,世界矩阵.matrixWorld自然就是以是世界坐标系为参照的模型矩阵。Three.js本地矩阵是

Three.js模型的位置属性.position、缩放系数属性.scale和角度属性.rotation记录了模型的所有平移、缩放和旋转变换,本地矩阵.materix是以线性代数矩阵的形式表示.position.scale.rotation。世界矩阵.matrixWorld自然是用矩阵的形式表示模型以及模型父对象的所有旋转缩放平移变换。更多内容可以参考文章《本地矩阵和世界矩阵》

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Threejs可视化

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值