Open Attil10 opened 11 months ago
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.
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.
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;
I think you are trying this code from https://github.com/kalwalt/ARnft-ES6-react, what is the result of pathName
?
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.
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?
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.