Marker Position Moves When Headset/Camera Moves

[loganknecht]

Hello,

I'm not sure how else to describe this besides, when I look at a marker and move my headset/camera the marker's world position moves to.

My expectation is that it should be statically positioned where I set the marker to be, but instead it's changing its world position in the opposite direction.

Here are some example screenshots

You can see that the marker on my phone is in the same position, but when I move my headset/camera the marker moves all over the place.

My code looks like this.

// Third-Party
import { ARCanvas, ARMarker } from "@artcom/react-three-arjs";
import {
    Box,
    Environment,
    OrbitControls,
    // PerspectiveCamera,
    Stage
} from "@react-three/drei";
import {
    ARButton,
    // Controllers,
    Hands,
    // Interactive,
    XR,
    // useHitTest,
    useXR
} from "@react-three/xr";
import React from "react";
import { createRoot } from "react-dom/client";
// Custom
// N/A

function ConstellationStage(props) {
    // -------------------------------------------------------------------------
    // State
    // -------------------------------------------------------------------------
    const current_xr_state = useXR();

    // -------------------------------------------------------------------------
    // Rendering
    // -------------------------------------------------------------------------
    const placeholder_view = (
        <Stage
            // for formatting
            adjustCamera={true}
            intensity={1}
            preset="rembrandt"
            shadows="contact"
        >
            <Environment preset="forest" background={true} />
            <OrbitControls />
            <ambientLight />
            {/*{current_xr_state.isPresenting === false ? null : null}*/}
        </Stage>
    );
    const ar_view = (
        <>
            <Hands />
            <ambientLight />
            <ARMarker
                params={{ smooth: true }}
                type={"pattern"}
                patternUrl={"data/patt.hiro"}
                onMarkerFound={() => {
                    console.log("Marker Found");
                }}
                position={[4, 0, -4]}
            >
                <Box
                    //
                    args={[1, 1, 1]}
                    material-color="hotpink"
                    // position={[0, 0, -4]}
                />
            </ARMarker>
            <Box args={[0.1, 0.1, 0.1]} material-color="red" position={[0, 1.5, -1]} />
            <Box args={[0.1, 0.1, 0.1]} material-color="blue" position={[0, 1.6, -1.2]} />
            <Box args={[0.1, 0.1, 0.1]} material-color="green" position={[0, 1.7, -1.3]} />
        </>
    );
    const final_render_element = current_xr_state.isPresenting === true ? ar_view : placeholder_view;

    return final_render_element;
}

function ConstellationScene(props) {
    const final_render_element = (
        <div style={{ height: "100vh", width: "100vw" }}>
            <ARButton />
            <ARCanvas
                detectionMode="mono_and_matrix"
                matrixCodeType="3x3"
                // gl={{ antialias: false, powerPreference: "default", physicallyCorrectLights: true }}
                onCameraStreamReady={() => console.log("Camera stream ready")}
                onCameraStreamError={() => console.error("Camera stream error")}
                // onCreated={({ gl }) => {
                //     gl.setSize(window.innerWidth, window.innerHeight);
                // }}
            >
                <XR>
                    <ConstellationStage />
                </XR>
            </ARCanvas>
        </div>
    );

    return final_render_element;
}

createRoot(document.getElementById("root")).render(<ConstellationScene />);

I don't think I'm doing anything wrong here. Is there a reason why this is changing the position of the marker?