能否用ARCore API开发iOS端WebXR？iPhone13 AR会话启动失败求助

核心问题分析 #

iOS Safari对WebXR的支持有严格的环境与特性要求，你的代码在Android正常但iOS失效，主要是未适配iOS的WebXR限制，以下是针对性修复方案：

1. 强制HTTPS运行环境 #

iOS Safari仅允许在**HTTPS（或localhost开发环境）**下启动WebXR会话，HTTP环境下会话会直接静默失败，需将部署环境切换为HTTPS。

2. 调整WebXR会话特性配置 #

iOS对hit-test特性的依赖需要搭配dom-overlay特性，否则会话无法初始化。修改ARButton的创建代码：

const button = ARButton.createButton(renderer, {
  requiredFeatures: ['hit-test', 'dom-overlay'],
  domOverlay: { root: document.body }
});
document.body.appendChild(button);

3. 修复模块加载路径 #

原代码使用本地相对路径加载Three.js模块，iOS可能因路径解析问题导致模块加载失败，替换为CDN路径确保兼容性：

<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
    "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
  }
}
</script>

若需兼容iOS 16.4以下版本，可保留原有的es-module-shims polyfill。

4. 添加错误监听排查问题 #

添加会话错误监听，捕获具体失败原因（避免无响应的黑盒状态）：

// 在init函数中添加
renderer.xr.addEventListener('sessionstart', (event) => {
  const session = event.session;
  session.addEventListener('error', (error) => {
    console.error('WebXR会话错误:', error);
    alert('AR会话启动失败: ' + error.message);
  });
});

5. 确认系统版本兼容性 #

确保iPhone 13的iOS版本在15.4及以上，这是Safari支持WebXR的最低版本要求。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js ar - hit test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <link type="text/css" rel="stylesheet" href="main.css">
    </head>
    <body>
        <div id="info">
            three.js ar - hit test<br/>(Chrome Android 81+ / iOS Safari 15.4+)
        </div>

        <!-- Import maps polyfill (兼容iOS 16.4以下版本) -->
        <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

        <script type="importmap">
            {
                "imports": {
                    "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
                    "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
                }
            }
        </script>

        <script type="module">
            import * as THREE from 'three';
            import { ARButton } from 'three/addons/webxr/ARButton.js';

            let container;
            let camera, scene, renderer;
            let controller;
            let reticle;
            let hitTestSource = null;
            let hitTestSourceRequested = false;

            init();
            animate();

            function init() {
                container = document.createElement( 'div' );
                document.body.appendChild( container );

                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 );

                const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
                light.position.set( 0.5, 1, 0.25 );
                scene.add( light );

                renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.xr.enabled = true;
                container.appendChild( renderer.domElement );

                // 调整ARButton配置
                const button = ARButton.createButton(renderer, {
                    requiredFeatures: ['hit-test', 'dom-overlay'],
                    domOverlay: { root: document.body }
                });
                document.body.appendChild(button);

                // 添加会话错误监听
                renderer.xr.addEventListener('sessionstart', (event) => {
                    const session = event.session;
                    session.addEventListener('error', (error) => {
                        console.error('WebXR会话错误:', error);
                        alert('AR会话启动失败: ' + error.message);
                    });
                });

                const geometry = new THREE.CylinderGeometry( 0.1, 0.1, 0.2, 32 ).translate( 0, 0.1, 0 );

                function onSelect() {
                    if ( reticle.visible ) {
                        const material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random() } );
                        const mesh = new THREE.Mesh( geometry, material );
                        reticle.matrix.decompose( mesh.position, mesh.quaternion, mesh.scale );
                        mesh.scale.y = Math.random() * 2 + 1;
                        scene.add( mesh );
                    }
                }

                controller = renderer.xr.getController( 0 );
                controller.addEventListener( 'select', onSelect );
                scene.add( controller );

                reticle = new THREE.Mesh(
                    new THREE.RingGeometry( 0.15, 0.2, 32 ).rotateX( - Math.PI / 2 ),
                    new THREE.MeshBasicMaterial()
                );
                reticle.matrixAutoUpdate = false;
                reticle.visible = false;
                scene.add( reticle );

                window.addEventListener( 'resize', onWindowResize );
            }

            function onWindowResize() {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize( window.innerWidth, window.innerHeight );
            }

            function animate() {
                renderer.setAnimationLoop( render );
            }

            function render( timestamp, frame ) {
                if ( frame ) {
                    const referenceSpace = renderer.xr.getReferenceSpace();
                    const session = renderer.xr.getSession();

                    if ( hitTestSourceRequested === false ) {
                        session.requestReferenceSpace( 'viewer' ).then( function ( referenceSpace ) {
                            session.requestHitTestSource( { space: referenceSpace } ).then( function ( source ) {
                                hitTestSource = source;
                            } );
                        } );

                        session.addEventListener( 'end', function () {
                            hitTestSourceRequested = false;
                            hitTestSource = null;
                        } );

                        hitTestSourceRequested = true;
                    }

                    if ( hitTestSource ) {
                        const hitTestResults = frame.getHitTestResults( hitTestSource );
                        if ( hitTestResults.length ) {
                            const hit = hitTestResults[ 0 ];
                            reticle.visible = true;
                            reticle.matrix.fromArray( hit.getPose( referenceSpace ).transform.matrix );
                        } else {
                            reticle.visible = false;
                        }
                    }
                }
                renderer.render( scene, camera );
            }
        </script>
    </body>
</html>

内容的提问来源于stack exchange，提问作者João Pedro S. Fernandes