AR.js开发需求：实体识别Marker后脱离Marker仍保持显示

当前AR.js场景存在以下问题：实体在相机识别到Marker时生成，但当相机移开、失去Marker焦点后，实体也会随之消失。需求是实体在首次识别Marker后生成，之后即使Marker不可见也保持显示。

解决方案思路 #

核心是将实体从Marker的子节点转换为场景的直接子节点，使其不再受Marker可见性的控制。通过自定义AFRAME组件，监听Marker的识别事件，在首次识别时完成实体的迁移，并保留其在世界空间中的位置、旋转和缩放。

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <!-- 引入支持Marker功能的AR.js版本 -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/dev/aframe/build/aframe-ar.js"></script>
    <script>
        // 自定义组件：实现实体识别Marker后持久化显示
        AFRAME.registerComponent('persist-on-scan', {
            init: function () {
                const markerEl = this.el.parentElement;
                const entityEl = this.el;
                let hasMigrated = false;

                // 监听Marker被识别的事件
                markerEl.addEventListener('markerFound', () => {
                    if (!hasMigrated) {
                        // 获取Marker在世界空间中的变换参数
                        const worldPosition = new THREE.Vector3();
                        const worldRotation = new THREE.Euler();
                        const worldScale = new THREE.Vector3();
                        markerEl.object3D.getWorldPosition(worldPosition);
                        markerEl.object3D.getWorldQuaternion(worldRotation);
                        markerEl.object3D.getWorldScale(worldScale);

                        // 将实体从Marker节点迁移到场景根节点
                        entityEl.remove();
                        document.querySelector('a-scene').appendChild(entityEl);

                        // 应用Marker的世界变换到实体，保持位置一致
                        entityEl.object3D.position.copy(worldPosition);
                        entityEl.object3D.quaternion.setFromEuler(worldRotation);
                        entityEl.object3D.scale.copy(worldScale);

                        hasMigrated = true; // 标记已迁移，避免重复操作
                    }
                });
            }
        });
    </script>
    <body style="margin : 0px; overflow: hidden;">
        <a-scene embedded arjs>
            <a-marker preset="hiro">
                <a-entity
                    position="0 0 0"
                    rotation="0 0 0"
                    scale="0.05 0.05 0.05"
                    gltf-model="../image-tracking/nft/trex/scene.gltf"
                    persist-on-scan  <!-- 启用自定义持久化组件 -->
                ></a-entity>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

关键说明 #

• persist-on-scan组件会监听父Marker的markerFound事件，仅在首次识别时执行迁移操作
• 迁移时获取Marker的世界空间变换数据，确保实体位置、旋转和缩放与识别时完全一致
• 迁移后实体成为场景直接子节点，不再受Marker可见性影响，即使Marker移出相机视野也会保持显示

内容的提问来源于stack exchange，提问作者Akshay Kumar