CODEWITHSUNDEEP
javascriptthree.js
Yogendra Chauhan
Yogendra Chauhan

Reputation: 825

Three.js Transform Controls - How to show only two arrows

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

Upvotes: 2

Views: 2932

Answers (2)

ketan
ketan

Reputation: 103

transformControl.showX = true
transformControl.showY = true
transformControl.showZ = false

Upvotes: 0

TheJim01
TheJim01

Reputation: 8886

Normally, I'd ask what you have tried so far, but there is no documentation for this control, and it's a fairly complex object to dig through if you don't know what you're looking for...

Consider you have a TranformControls named control.

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 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]
    ]
  ]

};

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.

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;

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

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

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.

Upvotes: 4

Related Questions