aframe，TransformControls 不适用于 3D 对象

Question

这张图没问题。但下图有问题。

我正在使用 aframe 和 https://threejs.org/docs/#examples/en/controls/TransformControls

<a-scene embedded>
<!--
    <a-entity data-type="entity" id="yellowSphere" geometry="primitive: sphere" material="color:#ff0; metalness:0.0; roughness:1.0" position="-2 2 -2"></a-entity>
-->
    <a-entity gltf-model="url(https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf)" animation-mixer scale="0.1 0.1 0.1"></a-entity>

    <a-sky data-type="sky" color="#fff"></a-sky>
</a-scene>

this.transformControls = new TransformControls(this.camera, this.canvasEl);
this.transformControls.size = 0.75;
this.transformControls.addEventListener('objectChange', (evt) => {
    const object = this.transformControls.object;
    if (!object) {
        return;
    }

    console.log(evt, object);
    this.selectionBox.setFromObject(object).update();
});

Answer 1

代码试图移动skinnedMesh，而不是根mesh。

一种解决方案是为Mesh 添加检查，如果没有，请使用getObject3D('mesh') 查找：

/* TransformControls, line 546 */
// Set current object
attach( object ) {
  if (object.type != "Mesh") {
    object = object.el.getObject3D("mesh") // this is the solution mentioned above
  }
  this.object = object;
  this.visible = true;
  return this;
}

故障here