js:获取旋转对象的位置
Three.JS: Get position of rotated object
在Three.JS中,我能够围绕其原点旋转对象。例如,如果我对一条线这样做,这条线会旋转,但它的顶点位置不会更新为它们的新位置。是否有某种方法可以将旋转矩阵应用于顶点的位置以找到点的新位置?假设我将点为(0,0,0)和(0,100,100)的直线在x轴上旋转45°,在y轴上旋转20°,在z轴上旋转100°。我该如何找到这些顶点相对于整个场景的实际位置?
谢谢
是的,'整个场景'是指世界位置。
THREE.Vector3()有一个applyMatrix4()方法,
你可以做与着色器相同的事情为了将一个顶点投射到世界空间中你可以这样做
yourPoint.applyMatrix4(yourObject.matrixWorld);
将其投影到相机空间中你可以应用下一个
yourPoint.applyMatrix4(camera.matrixWorld);
获取-1到1范围内的实际屏幕位置
yourPoint.applyMatrix4(camera.projectionMatrix);
你可以这样访问你的点
var yourPoint = yourObject.geometry.vertices[0]; //first vertex
也不需要做三次,你可以把矩阵组合起来。没有测试这个,但沿着这条线的东西。也可以用另一种方式:
var neededPVMmatrix = new THREE.Matrix4().multiplyMatrices(yourObject.matrixWorld, camera.matrixWorld);
neededPVMmatrix.multiplyMatrices(neededPVMmatrix, camera.projectionMatrix);
如果你需要一个很好的教程来了解它的底层功能,我推荐这个
Alteredq张贴了关于三个。js矩阵的所有信息
编辑
有一点需要注意,如果你只想要旋转,而不是平移,你需要使用上面的3x3部分,即模型世界矩阵的旋转矩阵。这可能会稍微复杂一些。我忘了three.js给了你什么,但我认为normalMatrix可以做到这一点,或者你可以将THREE.Vector3()转换为THREE.Vector4(),并将.w设置为0,这将防止任何翻译被应用。
edit2
如果你想在你的例子中移动线点,不是将它应用到粒子上,而是应用到
var yourVertexWorldPosition = new THREE.Vector3().clone(geo.vertices[1]); //this is your second line point, to whatever you set it in your init function
yourVertexWorldPosition.applyMatrix4();//this transforms the new vector into world space based on the matrix you provide (line.matrixWorld)
相关文章:
- 通过拖动可以更改三维模型对象在Three.js场景中的位置
- 如何在鼠标悬停时将对象从起始位置移动到结束位置,然后在鼠标悬停后再次移动
- 使用地理坐标,对更靠近用户的对象进行排序'的位置
- 块相对于父对象的位置
- 使用AngularJS修改对象位置只需一次
- jQuery拖动到相对位置的可排序列表中时出现可拖动辅助对象位置问题
- 为什么 javascript 返回对象位置 true 或 false
- 在MongoDB中排序后获取对象的位置
- 是否可以模拟 qUnit 测试的窗口位置对象
- 查找javascript对象中元素的位置
- 位置对象Javascript
- javascript/谷歌地图:将位置对象转换为字符串
- FF 13,IE 9:JSON 字符串化/地理位置对象
- 如何使用位置对象来解析 URL,而无需在 javascript 中重定向页面
- 定义位置对象和URL参数的正确URL语法是什么
- 防止固定位置对象在特定位置随页面滚动
- 相位定时器不改变位置对象,只改变位置值
- HTML5创建地理位置对象
- 从函数返回GMap位置对象
- Java等价于Javascript位置对象