404 camera_para.dat - Githubissues

IndyVC commented 3 years ago

When running in react (NextJS) the config.json get's a 404 Not fond camera_para.dat.

I am trying to use pinball, but nothing works when scanning the image. I assume this is the cause?

import Head from "next/head";
import { useEffect } from "react";
import { ARnft } from "@kalwalt/ar-nft";

export default function Home() {
  useEffect(() => {
    ARnft.init(640, 480, "../public/DataNFT/pinball", "/config.json", true)
      .then((nft) => {
        let mat = new THREE.MeshLambertMaterial({ color: 0xff0000 });
        let cubeGeom = new THREE.CubeGeometry(1, 1, 1);
        let cube = new THREE.Mesh(cubeGeom, mat);
        cube.position.z = 90;
        cube.scale.set(180, 180, 180);
        nft.add(cube);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);
  return (
    <div>
      <Head>
        <meta
          name="viewport"
          content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
        />
        <title>Create Next App</title>
      </Head>
      <main></main>
    </div>
  );
}

CONFIG:


    "addPath": "",
    "cameraPara": "camera_para.dat",
    "videoSettings": {
      "width": {
        "min": 640,
        "max": 800
      },
      "height": {
        "min": 480,
        "max": 600
      },
      "facingMode": "environment"
    },
    "loading": {
      "logo": {
        "src": "/images/arNFT-logo.gif",
        "alt": "arNFT.js logo"
      },
      "loadingMessage": "Loading, please wait..."
    },
    "renderer": {
      "type": "three",
      "alpha": true,
      "antialias": true,
      "context": null,
      "precision": "mediump",
      "premultipliedAlpha": true,
      "stencil": true,
      "depth": true,
      "logarithmicDepthBuffer": true
    },
    "camera": {
      "fov": "0.8 * 180 / Math.PI",
      "ratio": "window.clientWidth / window.clientHeight",
      "near": 0.01,
      "far": 1000
    }
  }```

kalwalt commented 3 years ago

Hi @IndyVC welcome on WebARkit org! yes probably it's not loading the config file. Do you receive some error in the console? You can also look at my react example https://github.com/kalwalt/ARnft-ES6-react in detail App.js https://github.com/kalwalt/ARnft-ES6-react/blob/5f6585dd941c26fc152b63d64fe8ca9296520824/src/App.js#L6. I hope that can help this.

Post Edit: yes you get that error.

kalwalt commented 3 years ago

IMO try:

- ARnft.init(640, 480, "../public/DataNFT/pinball", "/config.json", true)
+ ARnft.init(640, 480, "../public/DataNFT/pinball", "config.json", true)

IndyVC commented 3 years ago

Config file is able to load now, same for camera_para.dat.

Now previously it didn't load the pinball marker because of the previous errors that were blocking. At this moment I get these errors:

Network tab:

kalwalt commented 3 years ago

I think it's happens because you set up the wrong path, as the app is based on React should start simply with DataNFT/pinball without public.

IndyVC commented 3 years ago

You solved my issue, thanks! Reason I was stuck with /public was because NextJS told me to do so. To reference to static files, start with '/'. Thanks man!

You can close the issue.

kalwalt commented 3 years ago

Super, i'm happy for you!👍🙂

webarkit / ARnft

404 camera_para.dat #163