如何使用Three.js可视化ARKit WorldMap？

Question

我正在尝试使用Three.js通过浏览器中的iOS应用程序可视化ARKit通过iOS应用程序检测到的PlaneAnchorNodes，但是我无法获得要可视化的平面以与来自我正在导出的ARWorldMap。

我正在导出每个ARPlaneAnchor的位置，长度，宽度和旋转。这是一个示例PlaneAnchorNode的.debugDescription：

0, <ClientCore.PlaneAnchorNode: 0x10170d540 'HorizontalPlaneAnchor' pos(-0.034809 -0.391279 0.130804) rot(0.000000 -1.002311 0.000000 0.011389) scale(1.000000 1.000000 1.000000) | 5 children>

我正在导出为CSV，如下所示：

id,type,orientation,pos_x,pos_y,pos_z,rot_w,rot_x,rot_y,rot_z,length,width
0,anchorPlane,VerticalPlaneAnchor,4.4324,0.3275,-4.2946,3.0899,0.0277,-0.6809,0.7319,0.2359,1.0074
1,anchorPlane,VerticalPlaneAnchor,4.8228,-0.8363,-5.9102,3.1184,0.0118,-0.7006,0.7134,0.2723,0.4500
2,anchorPlane,HorizontalPlaneAnchor,5.5023,-1.1353,-2.8441,0.5499,0.0002,1.0000,0.0000,0.5798,0.4390
3,anchorPlane,HorizontalPlaneAnchor,5.0866,0.2323,-4.4964,0.0583,-0.0014,1.0001,-0.0003,0.2657,0.7294

为使Three.js可视化，我将点云和锚定平面添加到场景中，并按如下所示设置锚定：

// anchor planes
for (i = 0; i < planes_dataset.length; i++) {

    var pos_x = planes_dataset[i].pos_x;
    var pos_y = planes_dataset[i].pos_y;
    var pos_z = planes_dataset[i].pos_z;
    var rot_w = planes_dataset[i].rot_w;
    var rot_x = planes_dataset[i].rot_x;
    var rot_y = planes_dataset[i].rot_y;
    var rot_z = planes_dataset[i].rot_z;
    var width = planes_dataset[i].width;
    var length = planes_dataset[i].length;

    let cube_height = 0.1;

    var anchorGeometry = new THREE.BoxGeometry( width, cube_height, length );
    var anchorMaterial = new THREE.MeshPhongMaterial({ color: 0x7a7978, opacity: 0.5, transparent: true });
    var anchorCube = new THREE.Mesh( anchorGeometry, anchorMaterial );

    if (planes_dataset[i].orientation == "VerticalPlaneAnchor") {
        anchorCube.rotateX( - Math.PI / 2 ); // make vertical
    }

    //const quaternion = new THREE.Quaternion(rot_x, rot_y, rot_z, rot_w);
    //anchorCube.applyQuaternion(quaternion); // Apply Quaternion
    //anchorCube.quaternion.normalize();  // Normalize Quaternion

    scene.add(anchorCube);
    anchorCube.position.set(pos_x, pos_y, pos_z);
}

我的挑战是我无法弄清楚如何正确使用旋转，并且相对于点云，飞机没有正确旋转或定位。附有屏幕截图，使用我的楼梯将点云数据和检测到的平面对齐。任何想法将不胜感激！

Github上“ pointcloud可视化”分支中的完整代码：https://github.com/zredlined/control-my-mekamon/tree/pointcloud_visualization/pointcloud_visualization