AR.js中加载挤出SVG图像到标记点时报getUniforms未定义错误

报错根因 #

该报错出现在WebGL渲染管线的uniform参数读取阶段，是AR.js触发渲染时，SVG生成的网格对象还未完成初始化，或SVG默认像素级坐标超出AR标记视锥体范围导致的。

修复步骤 #

• 首先修正SVG生成组的坐标变换，SVGLoader默认加载的内容为像素单位，尺寸远大于AR.js标记的米级单位范围，需要对生成的组做缩放、位置、旋转调整，使其适配标记大小
• 强制标记在SVG加载完成前隐藏，避免未初始化就触发渲染
• 手动触发材质、几何体的更新标识，确保Three.js渲染前完成资源初始化
• 统一AR.js依赖的Three.js版本和SVGLoader的版本，避免版本不兼容导致的方法缺失

修正后代码 #

// 先隐藏标记，避免未加载完成触发渲染
myMarker.visible = false

// 实例化加载器
const loader = new SVGLoader();

// 加载SVG资源
loader.load(
    'data/svgSample.svg',
    function ( data ) {
        const paths = data.paths;
        const group = new THREE.Group();

        for ( let i = 0; i < paths.length; i ++ ) {
            const path = paths[ i ];
            const material = new THREE.MeshBasicMaterial( {
                color: path.color,
                side: THREE.DoubleSide,
                depthWrite: false
            } );
            const shapes = SVGLoader.createShapes( path );
            for ( let j = 0; j < shapes.length; j ++ ) {
                const shape = shapes[ j ];
                const geometry = new THREE.ShapeGeometry( shape );
                const mesh = new THREE.Mesh( geometry, material );
                // 手动标记需要更新
                mesh.material.needsUpdate = true
                mesh.geometry.needsUpdate = true
                group.add( mesh );
            }
        }

        // 适配AR标记的坐标变换，缩放值可根据实际SVG尺寸调整
        group.scale.set(0.001, -0.001, 0.001)
        group.position.set(0, 0, 0.01)
        group.rotation.x = -Math.PI / 2

        myMarker.add( group );
        // 加载完成后显示标记
        myMarker.visible = true
    },
    function ( xhr ) {
        console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
    },
    function ( error ) {
        console.log( '加载出错' );
    }
);

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