变换控件未出现在 THREE.js 纤维的网格中心

Question

我正在使用反应三纤维，我从文件中加载一些网格，然后在加载后，它们所属的组会居中。 我在网格上有一个单击处理程序，并将变换控件附加到单击的网格上。 问题在于，根据文件，变换控件最终会漂浮在网格之外，而不是集中在网格上。这些模型是来自 thingiverse 的随机 stl 文件。所以我的猜测是这些文件的原点和位置被搞乱了，它们的中心不是网格的中心。 下面是一个示例，这是一个组的子组件。

const StlObject = ({url,matUrl}) => {
    const [selected, SetSelected] = useState(false);

    const geometry = useLoader(STLLoader, url);

    const handleClick = (e) => {
        controls.current.enabled = false;
        transformControls.current.setMode('translate');
        transformControls.current.attach(meshRef.current);
    };

    return (
        <mesh onUpdate={update} rotation={[-Math.PI / 2, 0, 0]} geometry={geometry} ref={meshRef} onClick={handleClick} >
            <meshMatcapMaterial matcap={matUrl} />
        </mesh>
    );
}

Answer 1

我找到了解决方案。 它获取网格的中心，然后将其重新居中到 0,0,0，并使用

position

属性将其放回到原来的位置。

TransformControls

之后就完美了。

// Compute the bounding box of the mesh
const meshbBox = new THREE.Box3().setFromObject(mesh);
const meshCenter = meshbBox.getCenter(new THREE.Vector3());
mesh.geometry.center();
mesh.position.x = meshCenter.x;
mesh.position.y = meshCenter.y;
mesh.position.z = meshCenter.z;