Three.js 变换控件 - 如何只显示两个箭头 [英] Three.js Transform Controls - How to show only two arrows

问题描述

我只需要使用场景中的变换控件在 XY 方向上只显示两个箭头或变换对象.

I have to show only two arrows or transform object on XY directions only using transform controls with in the scene.

推荐答案

通常，我会问您到目前为止尝试了什么，但是没有关于此控件的文档，而且它是一个相当复杂的对象，需要挖掘如果你不知道你在找什么...

假设您有一个名为 control 的 TranformControls.

Consider you have a TranformControls named control.

control.children 是一个数组，代表各种小玩意"，索引 0 被翻译.那个小发明"也有 3 个孩子，但只有第一个与这个答案相关.所以我们不是在看 control.children[0].children[0]，它也有孩子，但这是我们研究的深度，因为这些孩子是代表各种的网格轴控制.作为参考，我们只会查看:control.children[0].children[0].children.

control.children is an array which represents the various "gizmos", with index 0 being translate. That "gizmo" also has 3 children, but only the first is relevant to this answer. So not we're looking at control.children[0].children[0], which ALSO has children, but this is as deep as we go, because these children are the meshes which represent the various axis controls. For reference, we're only going to be looking at: control.children[0].children[0].children.

TransformControls.js 像这样列出他们的设置配置:

TransformControls.js lists their setup configurations like this:

//three.js r89
this.handleGizmos = {

  X: [
    [new THREE.Mesh(arrowGeometry, new GizmoMaterial({
        color: 0xff0000
      })), [0.5, 0, 0],
      [0, 0, -Math.PI / 2]
    ],
    [new THREE.Line(lineXGeometry, new GizmoLineMaterial({
      color: 0xff0000
    }))]
  ],

  Y: [
    [new THREE.Mesh(arrowGeometry, new GizmoMaterial({
      color: 0x00ff00
    })), [0, 0.5, 0]],
    [new THREE.Line(lineYGeometry, new GizmoLineMaterial({
      color: 0x00ff00
    }))]
  ],

  Z: [
    [new THREE.Mesh(arrowGeometry, new GizmoMaterial({
        color: 0x0000ff
      })), [0, 0, 0.5],
      [Math.PI / 2, 0, 0]
    ],
    [new THREE.Line(lineZGeometry, new GizmoLineMaterial({
      color: 0x0000ff
    }))]
  ],

  XYZ: [
    [new THREE.Mesh(new THREE.OctahedronGeometry(0.1, 0), new GizmoMaterial({
        color: 0xffffff,
        opacity: 0.25
      })), [0, 0, 0],
      [0, 0, 0]
    ]
  ],

  XY: [
    [new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({
      color: 0xffff00,
      opacity: 0.25
    })), [0.15, 0.15, 0]]
  ],

  YZ: [
    [new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({
        color: 0x00ffff,
        opacity: 0.25
      })), [0, 0.15, 0.15],
      [0, Math.PI / 2, 0]
    ]
  ],

  XZ: [
    [new THREE.Mesh(new THREE.PlaneBufferGeometry(0.29, 0.29), new GizmoMaterial({
        color: 0xff00ff,
        opacity: 0.25
      })), [0.15, 0, 0.15],
      [-Math.PI / 2, 0, 0]
    ]
  ]

};

控件采用这些定义并将它们按顺序添加到 control.children[0].children[0].children，这样组成 X 轴控件的网格是索引 0 和1.

The control takes these definitions and adds them to control.children[0].children[0].children in order, such that the meshes that compose the X-axis control are indices 0 and 1.

这意味着关闭X轴控制，您需要设置:

This means to turn off the X-axis control, you would need to set:

control.children[0].children[0].children[0].visible = false;
control.children[0].children[0].children[1].visible = false;

同样，要关闭 YZ 平面控制，您将设置:

Similarly, to turn off the YZ plane control you would set:

control.children[0].children[0].children[8].visible = false;

为这些网格设置可见性就足够了，因为用于确定您正在使用哪个控件的 raycaster 将忽略不可见的网格.网格消失后，您也不再知道该轴/平面是可变形的.

Setting the visibility for these meshes is enough, because the raycaster used to determine which control you're using will ignore invisible meshes. With the meshes gone, you also remove the user's knowledge that that axis/plane is transformable.

这篇关于Three.js 变换控件 - 如何只显示两个箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！