Is there a react AR.js + Three.js template for quickstart?

Questions
1

I tried to run a simple AR.js + Three.js in a react app, with no success.

for the package.json I do npm install three, and for AR.js I add this specific commit from github in package.json to install:

"ar-js-org": "git@github.com:AR-js-org/AR.js.git#90e83dc4003aa1980b242014b3ca054effed8edf",

My App.js:


import { useEffect } from "react";
import "./App.css";
import * as THREE from "three/build/three.module";
import * as THREEx from "ar-js-org/three.js/build/ar-threex";

function App() {

  useEffect(() => {
    window.THREE = THREE; // because AR.js needs to access window.THREE to work
    initialize();
    animate();
  }, []);

function  initialize(){
//... rest is like usual 
      const width = window.innerWidth;
      const height = window.innerHeight;

      arToolkitSource = new THREEx.ArToolkitSource({
        sourceType: "webcam",
        sourceWidth: width,
        sourceHeight: height,
        displayWidth: width, // 3d models are skewed 
        displayHeight: height,
      });
//...
}

I have two problems:

  1. I get this warning: WARNING: Multiple instances of Three.js being imported.
  2. My 3d Objects are skewed, the scaling proportions are not right.

Is there a working example for react with AR.js and Three.js? (not fiber-three… not a-frame)