时间戳

首页 > 解决方案 > threejs如何旋转transformcontrol本身

javascript - threejs如何旋转transformcontrol本身

问题描述

当附加到 transformcontrol 的对象旋转时，我想旋转 transformcontrol 本身。

旋转前

在此处输入图像描述

旋转后

在此处输入图像描述

如图所示，在旋转之前，圆柱体的顶部方向是变换控件的 z 轴，而在旋转之后则不是。

我希望变换控件的 z 轴始终位于圆柱体的向上方向。

标签： javascriptthree.js

解决方案

TransformControls返回一个可以直接修改的对象。

const controls = new TransformControls(camera, renderer.domElement);
controls.setSpace('local');
controls.rotation.x = Math.PI / -2;

如果您想将其旋转与您的网格同步，您可以将其添加为该网格的子项或使用Euler#copy.

mesh.add(controls);

// or manually in a render loop, for example

scene.add(controls);

renderer.setAnimationLoop(() => {
  controls.rotation.copy(mesh.rotation);

  renderer.render(scene, camera);
});

推荐阅读