Three.js - 将自定义几何图形移动到原点 [英] Three.js - move custom geometry to origin

查看:61
本文介绍了Three.js - 将自定义几何图形移动到原点的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一些从 STEP 文件转换中获得的自定义几何图形,我使用鼠标旋转它们.它们围绕场景的原点旋转,但由于远离原点,它们似乎在虚拟球体上旋转.我怎样才能将它们移动到原点,使它们看起来不会漂浮"在周围(我的意思是我想将虚拟球体的半径减小到零).这是我想要移动的示例.我试过将他们的位置设置为 (0, 0, 0) 这样做:

I have some custom geometries obtained from a STEP file conversion and I use the mouse to rotate them. They rotate around the origin of the scene, but since they are far from it, they seem rotating on a virtual sphere. How can I move them to the origin so that they don't seem "floating" around (I mean that I'd like to reduce to zero the radius of the virtual sphere). This is the example I'd like to move. I've tried setting their position to (0, 0, 0) doing:

object.position.x = 0;
object.position.y = 0;
object.position.z = 0;

但是没有用.

推荐答案

此问题的典型解决方案是在创建几何图形后立即对其进行转换.您可以通过将平移矩阵应用于几何体来实现,如下所示:

The typical solution to this problem is to translate the geometry right after it is created. You do that by applying a translation matrix to the geometry like so:

geometry.applyMatrix( new THREE.Matrix4().makeTranslation( distX, distY, distZ ) );

您可以简单地执行此操作:

You can simply do this, instead:

geometry.translate( distX, distY, distZ ); // three.js r.72

函数 geometry.computeBoundingBox() 可能有助于您确定要翻译的数量.

The function geometry.computeBoundingBox() may be of help to you in determining an amount to translate.

但是,我看到在您的情况下,您有多个几何图形,因此它有点复杂,但可行.您需要以相同的量平移每个几何体.

However, I see in your case, you have multiple geometries, so it it a bit more complicated, but doable. You will need to translate each geometry by the same amount.

编辑

提示:不是将每个对象添加到场景中,而是创建一个父对象,将其添加到场景中,然后将对象添加到父对象中.

Tip: Instead of adding each object to the scene, create a parent object, add it to the scene, and then add the objects to the parent.

var parent;

parent = new THREE.Object3D();
scene.add( parent );

parent.add( object1 );
parent.add( object2 );
// and so on...

然后在您的渲染函数中,只旋转父对象,而不是单个对象.

Then in your render function, just rotate the parent, not the individual objects.

这篇关于Three.js - 将自定义几何图形移动到原点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆