0

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

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

我试图：

  • 重新安装节点模块
  • 比较 package.json 的并重新安装。
  • 改变了内部元素的位置ViroARImageMarker
  • 并重新组织了元素。

但似乎没有任何效果。

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

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

有一些动画，它们只是根据目标是否在视野中来放大/缩小视频。

（我删除了空格以适应更多屏幕）

主要代码

Viro 动画和材质

 

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

4

1 回答 1

0

我能够通过copying (downgrading) my dependencies我package.json的React-Viro 代码示例和视频decreasing的width/height（元素内部）和scale（动画中）解决这个问题。

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

于 2021-06-18T16:36:35.357 回答