1

我目前正在使用 React Native 中的 ViroReact 社区包，以便在找到特定图像时在 AR 中显示视频。但是没有触发 ViroARImageMarker 的 onTargetFound 函数，也没有显示ViroARImageMarker的子项。

当我将 onAnchorFound 函数添加到 ARScene（父级）时，触发了 onAnchorFound 方法，但是 ViroARImageMarker 的子级仍然没有被渲染。为什么没有触发该功能，因此没有显示子项？我该如何解决？

图像是一张 12x12cm 的黑色卡片，中间有一个亮橙色标志（约 3c​​m）。在 ViroARImageMarker 中找不到这两个目标。

这是我的代码：图像识别类

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);

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

  return (
    <ViroARScene>
      <ViroARImageMarker
        target={'inviteCard'}
        onAnchorFound={_onAnchorFound}>
        <ViroVideo source={videoPath} />
      </ViroARImageMarker>

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

ViroARTrackingTargets.createTargets({
  inviteCard: {
    source: require('@assets/images/invite-card.png'),
    orientation: 'Up',
    physicalWidth: 0.12 // real world width in meters
  },
  logo: {
    source: require('@assets/images/logo-empty.png'),
    orientation: 'Up',
    physicalWidth: 0.0287 // real world width in meters
  }
});

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;

应用程序

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
      }}
    />
  );
};

export default App;

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

依赖项：

"@viro-community/react-viro": "^2.21.1",
"react": "17.0.2",
"react-native": "0.66.3",
4

0 回答 0