SwaggerNiels
commented
1 year ago I think my method of editing the nft tracker is wrong. I have used the pinball image to make my "own" fset-, fset3-, iset-files. (named: pinball_own) And changed the code to fit these names.
It then fails to show the AR objects, while it does detect the image with the "pinball_own" files.
_ARnft\examples\arNFT_autoupdateexample.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ARnft example showing a simple red cube</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1" />
<link rel="stylesheet" href="css/nft-style.css" />
</head>
<body>
<a href="https://raw.githubusercontent.com/artoolkitx/artoolkit5/master/doc/Marker%20images/pinball.jpg" class="ui marker" target="_blank">
🖼 Marker Image
</a>
<script src="js/third_party/three.js/three.min.js"></script>
<script src="js/ARnftThreejs.js"></script>
<script src="../dist/ARnft.js"></script>
<script>
let width = 480;
let height = 640;
ARnft.ARnft.initWithConfig({
width: width,
height: height,
markerUrls: [["examples/DataNFT/pinball_own"]],
names: [["pinball_own"]],
configUrl: "config.json",
stats: true,
autoUpdate: false,
})
.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(1, 1, 180);
let mat2 = new THREE.MeshLambertMaterial({
color: 0xff0000,
});
let boxGeom2 = new THREE.BoxGeometry(1, 1, 1);
let cube2 = new THREE.Mesh(boxGeom, mat);
cube2.position.z = 10;
cube2.scale.set(10, 10, 10);
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();
let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
nftAddTJS.add(cube, "pinball", false);
nftAddTJS.add(cube2, "pinball_own", false);
const fpsInterval = 1000 / 30;
let now = Date.now(), elapsed = 0, then = now;
const tick = () => {
now = Date.now();
elapsed = now - then;
sceneThreejs.draw();
if (elapsed > fpsInterval) {
then = now - (elapsed % fpsInterval);
nft.update();
}
window.requestAnimationFrame(tick);
};
tick();
});
})
.catch((error) => {
console.log(error);
});
</script>
</body>
</html>
kalwalt
But when I use NFT creator (web/node.js) and
It detects it! (as outputted in the browser console) but... then it does not show the AR (red cube, flamingo, etc.)
What could be the problem here?
Edit: Sometimes I see a brief flash of the AR object on my image, but it dissapears within a fraction of a second