Three.jsトランスフォームコントロール - 2つの矢印のみを表示する方法

Question

シーン内にトランスフォームコントロールを使用している場合のみ、矢印を2つ表示するかXY方向にオブジェクトを変形する必要があります。

Answer 1

通常、これまでに試したことはありますが、このコントロールのドキュメントはありません。あなたが探しているものがわからない場合は、かなり複雑なオブジェクトです。

TranformControlsという名前のcontrolがあるとします。

control.childrenは、インデックス「0」が翻訳されているさまざまな「ギズモ」を表す配列です。その "ギズモ"にも3人の子供がいますが、最初のものだけがこの答えに関連しています。だから私たちは子どもを持っているcontrol.children[0].children[0]を見ていませんが、これらの子はさまざまな軸のコントロールを表すメッシュなので、これは深いです。参考までには、control.children[0].children[0].childrenをご覧ください。

TransformControls.jsはこのような彼らのセットアップ構成を示します：

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

}; 

制御はX軸制御を構成するメッシュはインデックス0と1

あるように、これらの定義を取り、順番に control.children[0].children[0].childrenに追加します

これは、X軸制御をオフにすることを意味し、あなたが設定する必要があります：のオンにする、

同様

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

をYZ平面制御fはあなたが設定します：あなたが使用しているかを制御を決定するために使用raycasterは目に見えないメッシュを無視するため、これらのメッシュのための可視性を設定

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

は、十分です。メッシュがなくなると、その軸/平面が変形可能であるというユーザーの知識も削除されます。