React当目标被看到时，Viro AR ImageTracking子元素被放置在摄像机内。

Question

目前，我正在使用Viro-React (React-Viro)进行一个AR项目，在这个项目中，如果摄像机看到了某些图片，就会在摄像机前面播放视频。我让它工作得很好，但是几天后，在不改变代码的情况下，当目标被看到时，ViroARImageMarker中的视频和所有东西总是被放置在摄像机内。

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

我试图：

• 重新安装节点模块
• 比较了Package.json的和重新安装的。
• 更改ViroARImageMarker中元素的位置
• 重组元素。

但似乎什么都起不到作用。

正如我所说的，代码本身显示和隐藏了视频，但没有定位视频( ViroARImageMarker中的每一个都是正确的)，而是在目标被看到时将它们定位在摄像机的位置，然后将它们保持在那里。

这是密码。(结尾的片段)我在另一个脚本中将这个函数传递给ViroARSceneNavigator。

有一些动画，只是放大/向下的视频取决于目标是否在视图中。

(我移除了空白空间以适应更多的屏幕)

主要代码

虚拟动画与素材

​

   "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代码和decreasing、width/height (在元素中)和scale (在动画中)解决这个问题。

注意，如果ViroARImageMarker的子元素是too big (在规模和大小上)，则issue comes back。