Developing a new NFT utiltity lib

kalwalt commented 4 years ago

Proposal

With this PR i want to develop a little lib that help to make a nft Webapp with jsartoolkit5. It provide a set of functions that can be reused and simplify the development process. Features to add:

Example

add the styling inside the <head>:

<link rel="stylesheet" type="text/css" href="../resources/css/video-style.css">

in your html inside <body> import the libs:

<script src="../resources/three.min.js"></script>
<script src="../resources/js/libs/stats.min.js"></script>
<script src="../resources/build/nftLoader/nftLoader.min.js"></script>

then create a script like this:

<script>

    var nftLoader = new NFTLoader(640, 480, 'config.json');

    nftLoader.init("../../dataNFT/pinball", true);

    var texture = new THREE.TextureLoader().load( '../../../resources/data/textures/aframe-k.png' );

    var mat = new THREE.MeshLambertMaterial({color: 0xbbbbff, map: texture});
    var planeGeom = new THREE.PlaneGeometry(1,1,1,1);
    var plane = new THREE.Mesh(planeGeom, mat);
    plane.position.z = 0;
    plane.position.x = 90;
    plane.position.y = 90;
    plane.scale.set(180,180,180);

    nftLoader.add(plane);

</script>

To do list

[x] base class where you can define video width, height and camera param url.
[x] init() function where define marker url, canvas, video...
[x] add() function where you can attach a Three.js Object3D.
[x] nft marker url setting
[x] loadModel() to load a gltf model.
[x] a config file where store artoolkit.worker.js path and other settings.
[x] create container, canvas and video html elements ( without to be explictly written inside the html by the user)
[x] create optionally stats html elements
[x] minified version
[x] fullscreen mode

ThorstenBux commented 4 years ago

You want to run NFT on server side?

kalwalt commented 4 years ago

You want to run NFT on server side?

No only to add some functions to simplify things, to avoid rewriting the same code overe and over again. I will let you know of my results :slightly_smiling_face:

ThorstenBux commented 4 years ago

got it, fullscreen you should be able to get from here: https://github.com/ThorstenBux/ar-magazine

kalwalt commented 4 years ago

Thank you @ThorstenBux !

kalwalt commented 4 years ago

I think i can put in config.json also the camera_para.dat file configuration path, i need also to solve how to inject the artoolkit url inside the worker https://github.com/kalwalt/kalwalt-interactivity-AR/blob/0847a3a4b2a1079f0e9148dfab5bc451d9545e30/resources/jsartoolkit5/artoolkit/artoolkit.worker.js#L1

kalwalt commented 4 years ago

Although the grunt-contrib-uglify-es solved the issue, is deprecated. So better to use this package instead grunt-terser. See this article: https://stackoverflow.com/questions/38429567/some-es6-features-are-not-understood-by-grunt-uglify-js Travis is failing because is configured for Ruby (Gemfile).

kalwalt commented 4 years ago

Travis issue because i changed the files structures and names, was easy to solve see: https://github.com/kalwalt/kalwalt-interactivity-AR/pull/18/commits/64284dac0e45cddef46958c11bdf80674a720c22

kalwalt commented 4 years ago

I will merge this. Other features will be added in a next PR / release.

kalwalt / kalwalt-interactivity-AR