时间戳

首页 > 解决方案 > aframe，TransformControls 不适用于 3D 对象

three.js - aframe，TransformControls 不适用于 3D 对象

问题描述

在职的

这张照片是没有问题的。但下图是问题。

不工作

我正在使用 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();
});

标签： three.jsaframe

解决方案

代码试图移动skinnedMesh，而不是 root 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;
}

故障在这里

推荐阅读