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?