当看到目标时，React-Viro AR ImageTracking 子元素位于相机内部

Question

我目前正在使用 Viro-React (React-Viro) 进行 AR 项目，在该项目中，如果相机看到某些图片，则会在其前面播放一段视频。我让它工作得很好，但不知何故，几天后，在不更改代码的情况下，ViroARImageMarker 内的视频和所有内容始终位于相机内，当目标被看到时。

这种行为似乎只发生在我自己的项目中，而不是在 Viro Media 提供的示例中。

我尝试过：

正在重新安装节点模块
比较 package.json 并重新安装。
更改了 ViroARImageMarker
并重组了元素。

但似乎没有任何效果。

正如我所说，代码本身显示和隐藏视频，但没有正确定位视频（每个都在 ViroARImageMarker 内，但在看到目标时将它们定位在摄像机的位置，然后让他们留在那里。

这是代码。（最后的片段）我将此函数传递给另一个脚本中的 ViroARSceneNavigator。

有一些动画只是根据目标是否在视野中来缩放 up/down 视频。

（我删除了空格以适应一个屏幕）

Main Code

Viro Animations and Material

 

   "use strict";

import React, { useState } from "react";
import { ViroARScene, ViroNode, ViroARImageMarker, ViroVideo, ViroARTrackingTargets, ViroAnimations, ViroMaterials } from "react-viro";

const MainScene = (props) => {
    const videoPath = require("./res/Test_Video.mp4");
    const [playVideoAnimation, setPlayVideoAnimation] = useState(false);
    const [videoAnimationName, setVideoAnimationString] = useState("showVideo");
    const [shouldPlayVideo, setShouldPlayVideo] = useState(false);

    function onAnchorFound() {
        setPlayVideoAnimation(true);
        setVideoAnimationString("showVideo");
        setShouldPlayVideo(true);
    }

    function onAnchorRemoved() {
        setShouldPlayVideo(false);
        setVideoAnimationString("closeVideo");
        setPlayVideoAnimation(true);
    }

    function onVideoAnimationFinish() {
        setPlayVideoAnimation(false);
    }

    function onVideoFinish() {
        setShouldPlayVideo(false);
        setVideoAnimationString("closeVideo");
        setPlayVideoAnimation(true);
    }
    
    return (
        <ViroARScene>
            <ViroARImageMarker target={"targetOne"} onAnchorFound={onAnchorFound} onAnchorRemoved={onAnchorRemoved}>
                <ViroNode rotation={[-90, 0, 0]}>
                    <ViroVideo
                        position={[0, 0, 0]}
                        scale={[0, 0, 0]}
                        dragType="FixedToWorld"
                        animation={{ name: videoAnimationName, run: playVideoAnimation, onFinish: onVideoAnimationFinish }}
                        source={videoPath}
                        materials={["chromaKeyFilteredVideo"]}
                        height={0.2 * (9 / 16)}
                        width={0.2}
                        paused={!shouldPlayVideo}
                        onFinish={onVideoFinish}
                    />
                </ViroNode>
            </ViroARImageMarker>
        </ViroARScene>
    );
};

ViroAnimations.registerAnimations({
    showVideo: {
        properties: { scaleX: 0.9, scaleY: 0.9, scaleZ: 0.9 },
        duration: 1,
        easing: "bounce",
    },
    closeVideo: {
        properties: { scaleX: 0, scaleY: 0, scaleZ: 0 },
        duration: 1,
    },
});

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

ViroARTrackingTargets.createTargets({
    targetOne: {
        source: require("./res/Test_Bild.png"),
        orientation: "Up",
        physicalWidth: 0.01, // real world width in meters
    },
});

export default MainScene;

Answer 1

我能够通过 copying (downgrading) my dependencies 在我的 package.json 中从 React-Viro codesamples 和 decreasing width/height（在元素内）和scale（动画中）的视频。

请注意，如果 ViroARImageMarker 的子元素是 too big（比例和大小），则 issue comes back。

当看到目标时，React-Viro AR ImageTracking 子元素位于相机内部

React-Viro AR ImageTracking sub elements are positioned inside camera when target is seen

reactjs

react-native

augmented-reality

viro-react

viro-media