ViroARImageMarker的onAnchorFound未触发且子组件不渲染如何解决

问题根因 #

• 未在ViroARSceneNavigator中开启图像追踪配置，Viro默认不会主动检测已注册的图像目标
• 追踪目标注册时机不合理，组件外部注册可能受资源加载顺序影响导致注册失效
• AR元素缺少基础位置、缩放属性，就算识别成功也无法在视野内渲染
• 物理尺寸与实际物体偏差较大，会直接降低识别成功率

修复步骤 #

1. 修改入口App代码，新增图像追踪配置 #

import React from 'react';
const { ViroARSceneNavigator } = require('@viro-community/react-viro');
import styled from 'styled-components/native';
import NewViroTracker from 'components/NewViroTracker';

const App = () => {
  return (
    <ViroWrapper
      autofocus={true}
      initialScene={{
        scene: NewViroTracker
      }}
      // 新增以下配置，开启图像追踪
      trackingConfigurations={{
        worldAlignment: "Gravity",
        imageTargets: ["inviteCard", "logo"]
      }}
    />
  );
};

export default App;

const ViroWrapper = styled(ViroARSceneNavigator)`
  flex: 1;
`;

2. 调整图像识别组件代码，优化注册时机和AR元素属性 #

import React, { useEffect, useState } from 'react';

const {
  ViroARScene,
  ViroARImageMarker,
  ViroARTrackingTargets,
  ViroAnimations,
  ViroVideo,
  ViroMaterials,
  ViroBox
} = require('@viro-community/react-viro');

const NewViroTracker = () => {
  const videoPath = require('@assets/videos/wham.mp4');
  const [videoAnimationName] = useState('showVideo');
  const [playAnim, setPlayAnim] = useState(false);

  // 组件挂载完成后再注册追踪目标，避免资源加载时序问题
  useEffect(() => {
    ViroARTrackingTargets.createTargets({
      inviteCard: {
        source: require('@assets/images/invite-card.png'),
        orientation: 'Up',
        // 请重新测量实际卡片宽度，误差控制在0.01米以内
        physicalWidth: 0.12
      },
      logo: {
        source: require('@assets/images/logo-empty.png'),
        orientation: 'Up',
        // 请重新测量实际logo宽度，误差控制在0.005米以内
        physicalWidth: 0.03
      }
    });
  }, []);

  function _onAnchorFound(evt: any) {
    console.log('Anchor found in Marker :', evt);
    setPlayAnim(true);
  }

  return (
    <ViroARScene>
      <ViroARImageMarker
        target={'inviteCard'}
        onAnchorFound={_onAnchorFound}>
        {/* 新增位置、缩放、播放控制属性，可根据实际效果调整参数 */}
        <ViroVideo 
          source={videoPath} 
          position={[0, 0, 0]}
          scale={[0.12, 0.07, 0.1]}
          loop={true}
          paused={!playAnim}
        />
      </ViroARImageMarker>

      <ViroARImageMarker
        target={'logo'}>
        <ViroBox position={[0, 0.25, 0]} scale={[0.5, 0.5, 0.5]} />
      </ViroARImageMarker>
    </ViroARScene>
  );
};

ViroMaterials.createMaterials({
  chromaKeyFilteredVideo: {
    chromaKeyFilteringColor: '#00FF00'
  }
});

ViroAnimations.registerAnimations({
  showVideo: {
    properties: { scaleX: 1, scaleY: 1, scaleZ: 1 },
    duration: 1000
  },
  closeVideo: {
    properties: { scaleX: 0, scaleY: 0, scaleZ: 0 },
    duration: 1
  }
});

export default NewViroTracker;

3. 额外优化建议 #

• 确保用作识别目标的本地图片和实际印刷卡片的宽高比完全一致，不要有拉伸变形
• 识别时保证光线充足，避免卡片反光、褶皱，尽量让卡片完整出现在相机画面中
• 如果黑色卡片识别率低，可以在卡片边缘增加高对比度的图案提升特征点数量

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