THREE JS get (world) rotation from matrixWorld(三个 JS 从 matrixWorld 获取(世界)旋转)
问题描述
如何在 three.js 中获得 Object3D 的世界旋转?我知道如何从 object.matrixWorld
获取 Object3D 的世界位置,但是如何获取对象的世界旋转?
How do I get the world rotation of an Object3D in three.js?
I know how to get the world position of an Object3D from object.matrixWorld
, but how do I get the world rotation of an object?
我需要这个来解决以下问题:我有一个像这样的分层对象结构:
I need this for the following problem: I have a hierarchical Object structure like this:
var obj1 = new THREE.Object3D();
obj1.x = 200;
obj1.rotation.x = 0.1;
scene.add(obj1);
var obj2 = new THREE.Object3D();
obj2.y = -400;
obj2.rotation.y = 0.21;
obj1.add(obj2);
var obj3 = new THREE.Object3D();
obj3.z = -200;
obj3.rotation.x = 0.1;
obj3.rotation.y = -0.1;
obj2.add(obj3);
现在我想让我的相机在一定距离内正交地看 obj3.当我的对象不旋转时,它的工作原理如下:
Now I want to make my camera look at obj3 orthogonally in a certain distance. When My Objects are not rotated, this works like this:
var relativeCameraOffset = new THREE.Vector3(0, 0, 500); // 500 is z-distance from my object
var cameraOffset = relativeCameraOffset.applyMatrix4(obj3.matrixWorld);
camera.position = cameraOffset;
当只有我的最后一个孩子被旋转时,当我添加这一行时,我得到了我想要的
When only my last child is rotated I get what I want when I add this line
camera.rotation = obj3.rotation;
但是当所有父元素都旋转时,这不起作用.所以我正在寻找一种方法来获得我的 3D 对象的世界方向".谢谢.
But when all parent Elements are rotated this is not working. So I'm looking for a way to get the world "orientation" of my 3D object. Thanks.
推荐答案
获取世界"旋转的一种方法如下:
One way to get the "world" rotation is as follows:
var position = new THREE.Vector3();
var quaternion = new THREE.Quaternion();
var scale = new THREE.Vector3();
mesh.matrixWorld.decompose( position, quaternion, scale );
然后您可以像这样设置相机方向:
You can then set your camera orientation like so:
camera.quaternion.copy( quaternion );
重要提示:如果您要直接访问 matrixWorld
,您必须确保它已更新.渲染器通常在渲染循环中为您执行此操作.但是,如果您在渲染调用之间,并且需要强制更新矩阵,则可以使用
Important: if you are going to access matrixWorld
directly, you have to make sure it is updated. The renderer typically does this for you in the render loop. If, however, you are between render calls, and need to force an update of the matrix, you can do so with
mesh.updateMatrixWorld( true );
现在有一种新方法可用.检查源代码,看看它在做什么.
There is a new method that is now available. Check the source code so you see what it is doing.
Object3D.getWorldQuaternion( optionalTarget );
three.js r.69
three.js r.69
这篇关于三个 JS 从 matrixWorld 获取(世界)旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:三个 JS 从 matrixWorld 获取(世界)旋转
基础教程推荐
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01