Error to Server

[Attil10]

I'll try! I'm trying to put the project on a server, in local host everything works perfectly but when I try to launch it from https I get the following error:

Error: Error in loadCamera function:
at A. (a675282e-2e1c-4b3a-9e52-a52f40f8cdf3:1:739449)
at t (a675282e-2e1c-4b3a-9e52-a52f40f8cdf3:1:828)
at Generator. (a675282e-2e1c-4b3a-9e52-a52f40f8cdf3:1:2183)
at Generator.throw (a675282e-2e1c-4b3a-9e52-a52f40f8cdf3:1:1191)
at A (a675282e-2e1c-4b3a-9e52-a52f40f8cdf3:1:7828)
at o (a675282e-2e1c-4b3a-9e52-a52f40f8cdf3:1:8067)

I think I'm doing something wrong but I don't understand what. Can anyone tell me why? or maybe you can help me?
Thanks in advance.

[kalwalt]

HI @Attil10 can you add more informations about your server (if possible)? Obiuvsly it seems that the app can't load the configuration camera file, I add this error trying to load in a Node.js environment and at this time i haven't solved that issue. You should try the dev version of the lib, ( you need to re-build ARnft with npm run dev-ts) to get more infos on the Error, but it depends how your project is structured.

[Attil10]

Yes, I managed to find the problem, I hadn't added the path, but now when I try to view my glb I get this error:

Uncaught TypeError: Cannot set properties of undefined (setting 'visible')
at NFTaddTJS.ts:159:1
at t.found (NFTWorker.ts:218:1)
at worker.onmessage (NFTWorker.ts:186:1)

could you help me? the app starts and also identifies the marker but it doesn't load the glb model.

[Attil10]

my App.js file is this:

import React from 'react';
import './App.css';
import { ARnft } from '@webarkit/ar-nft';
import * as ARnftThreejs from '@webarkit/arnft-threejs';
import * as THREE from 'three'

const pathName = window.location.pathname
let config;
console.log(pathName);
if (pathName === '/ARnft-ES6-react'){
config = '/ARnft-ES6-react/config_brave_robot.json'
} else {
config = 'config_brave_robot.json'
}

let width = 640;
let height = 480;
ARnft.init(width, height, [["DataNFT/pinball"]], [['pinball']], config, true)
.then((nft) => {

let mat = new THREE.MeshLambertMaterial({ color: 0xff0000 });
let boxGeom = new THREE.BoxGeometry(1, 1, 1);
let cube = new THREE.Mesh(boxGeom, mat);
cube.position.z = 90;
cube.scale.set(180, 180, 180);

let root = new THREE.Object3D();
root.matrixAutoUpdate = false;

document.addEventListener('containerEvent', function (ev) {

    let canvas = document.getElementById('canvas');
    let fov = 0.8 * 180 / Math.PI;
    let ratio = width / height;
    let config = {
        "renderer": {
            "alpha": true,
            "antialias": true,
            "context": null,
            "precision": "mediump",
            "premultipliedAlpha": true,
            "stencil": true,
            "depth": true,
            "logarithmicDepthBuffer": true
        },
        "camera": {
            "fov": fov,
            "ratio": ratio,
            "near": 0.01,
            "far": 1000
        }
    }

    let sceneThreejs = new ARnftThreejs.SceneRendererTJS(config, canvas, nft.uuid,
        true);
    sceneThreejs.initRenderer();

    const renderer = sceneThreejs.getRenderer();
    const scene = sceneThreejs.getScene();
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.physicallyCorrectLights = true;
    let directionalLight = new THREE.DirectionalLight('#fff', 0.4);
    directionalLight.position.set(0.5, 0, 0.866);
    scene.add(directionalLight)

    let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
    nftAddTJS.oef = true;
            


     
      nftAddTJS.addModel('brave_robot.glb', 'pinball', 80, false);          
  


    const tick = () => {
        sceneThreejs.draw();
        window.requestAnimationFrame(tick)
    }
    tick()
})

}).catch((error) => {
console.log(error);
});

document.addEventListener('onInitThreejsRendering', (ev) => {
// set here extra rendering settings after init
console.log('onInitThreejsRendering is available only outside containerEvent!');
})

function App() {
return (

);
}

export default App;

[kalwalt]

I think you are trying this code from https://github.com/kalwalt/ARnft-ES6-react, what is the result of pathName?

[Attil10]

Yes I was trying to figure out how to test the project on a server. the result of the path name is /ARnft-ES6-react.

[kalwalt]

Yes, I managed to find the problem, I hadn't added the path, but now when I try to view my glb I get this error:

Uncaught TypeError: Cannot set properties of undefined (setting 'visible') at NFTaddTJS.ts:159:1 at t.found (NFTWorker.ts:218:1) at worker.onmessage (NFTWorker.ts:186:1)

could you help me? the app starts and also identifies the marker but it doesn't load the glb model.

Does the model is loaded? The model path is correct?

[kalwalt]

@Attil10 did you solved the issue?