Can't use MindAR npm install with three.js

[FireDragonGameStudio]

Hi, after installing MindAR via npm I'm trying to get started with the three.js sample, but I always get the following error when using the basic sample:

TypeError: Cannot read properties of undefined (reading 'MindARThree')

While I know, that IMAGE of MINDAR.IMAGE.MindARThree is undefined here, I wonder if there is smth wrong. I'm importing MindAR like this import * as MINDAR from "mind-ar/dist/mindar-image-three.prod.js"; and try to started it with

const mindarThree = new MINDAR.IMAGE.MindARThree({
  container: document.querySelector("#container"),
  imageTargetSrc: "https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/examples/image-tracking/assets/card-example/card.mind"
});

thx in advance and br, Max

[turkyden]

You can get the instance by window @FireDragonGameStudio

const { THREE, MindARThree } = window.MINDAR.IMAGE;
const mindarThree = new MindARThree({
  container: document.querySelector("#container"),
  imageTargetSrc: "https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/examples/image-tracking/assets/card-example/card.mind"
});

Because

https://github.com/hiukim/mind-ar-js/blob/c213f9131dfad03e2c43296d41172c32cd203b38/src/image-target/three.js#L258

[FireDragonGameStudio]

When trying to get the instance via window the following error is appearing:

Property 'MINDAR' does not exist on type 'Window & typeof globalThis'.

[Makio64]

in my case i just do : import 'mind-ar/dist/mindar-image-three.prod.js'

full code

import 'mind-ar/dist/mindar-image-three.prod.js'

        const THREE = window.MINDAR.IMAGE.THREE
        const mindarThree = new window.MINDAR.IMAGE.MindARThree({
            container: this.$el,
            imageTargetSrc: './targets.mind',
            filterMinCF: 1,
            filterBeta: 10000,
            missTolerance: 0,
            warmupTolerance: 0,
        })
        const { renderer, scene, camera } = mindarThree

        const anchor = mindarThree.addAnchor(0)
        const geometry = new THREE.PlaneGeometry(1, 0.55)
        const material = new THREE.MeshBasicMaterial({ color: 0x00ffff, transparent: true, opacity: 0.5 })
        const plane = new THREE.Mesh(geometry, material)
        anchor.group.add(plane)

        const start = async () => {
            await mindarThree.start()
            renderer.setAnimationLoop(() => {
                renderer.render(scene, camera)
            })
        }

        start()

[FireDragonGameStudio]

Thx for the hint @Makio64 and @turkyden. I played around with it and it looks like this now: It works in Javascript :) but it's not working in Typescript. Oo

Which leads to my next question: Is MindAR compatible with Typescript?

[FireDragonGameStudio]

Forget it, I'm just stupid... I forgot to add the definition for MindAR in Typescript (which should be used, when using js libraries). After declaring that, everything works fine 👍 If anybody is interested in how this can be configured in Angular:

• Add the following entry to the scripts section in angular.json:

  "scripts": [
  "./node_modules/mind-ar/dist/mindar-image-three.prod.js"
  ]

• import it with import 'mind-ar/dist/mindar-image-three.prod.js';
• declare it with declare var MINDAR: any;

The full source code of my app-component.ts:

import { Component } from '@angular/core';
import 'mind-ar/dist/mindar-image-three.prod.js';

declare var MINDAR: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'mindar-test';

  ngOnInit() {
    const THREE = MINDAR.IMAGE.THREE;
    const mindarThree = new MINDAR.IMAGE.MindARThree({
      container: document.querySelector("#container"),
      imageTargetSrc: "https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/examples/image-tracking/assets/card-example/card.mind"
    });
    console.log('MindARThree', mindarThree);

    const {renderer, scene, camera} = mindarThree;
    const anchor = mindarThree.addAnchor(0);
    const geometry = new THREE.PlaneGeometry(1, 0.55);
    const material = new THREE.MeshBasicMaterial( {color: 0x00ffff, transparent: true, opacity: 0.5} );
    const plane = new THREE.Mesh( geometry, material );
    anchor.group.add(plane);
    const start = async() => {
        await mindarThree.start();
        renderer.setAnimationLoop(() => {
        renderer.render(scene, camera);
      });
    }
    const startButton = document.querySelector("#startButton");
    if (startButton) {
      startButton.addEventListener("click", () => {
          start();
      });
    }
    const stopButton = document.querySelector("#stopButton");
    if (stopButton) {
      stopButton.addEventListener("click", () => {
        mindarThree.stop();
        mindarThree.renderer.setAnimationLoop(null);
      });
    }
  }
}

Sorry for the confusion and thx for the help 💯

br, Max