Marker Position Moves When Headset/Camera Moves

[loganknecht]

Bug

Current Behaviour

When I load the ARScene and use ARjs to scan a marker I am able to render a box, however when I move my camera/headset around the offset of the marker moves in opposite directions and goes out of scene.

I have tried to make a code sandbox here, but for some reason it can't find the @artcom/react-three-arjs in the local library or something?

You can find the code here
https://codesandbox.io/s/vx2dj4

If you copy and paste it locally it should work just the same.

Relevant Information

• I'm using a react library called @artcom/react-three-arjs that's a very basic wrapper of ARjs for React, so the syntax looks different, but it's the same.
• I am working with a Magic Leap 2 device

Related Code

The code for it is 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="blue"
                    material-opacity="0.5"
                    material-side="double"
                    position={[0, 0.5, 0]}
                />
            </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
                arEnabled="true"
                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 />);

Expected Behaviour

I am expecting the marker to show up, in the center of the mark, and not move.

However when it renders it's offset and moves when my camera/headset moves.

I think this may be related to #543

Demonstration

Please see the images below.
The pink cube is the marker.