Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

new 0.9.0 Arnft version #181

Merged
merged 26 commits into from
May 24, 2021
Merged

new 0.9.0 Arnft version #181

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
1c2a1a8
more infos
kalwalt May 18, 2021
65cddab
fix for a typo
kalwalt May 18, 2021
56553cb
moving getUserMedia
kalwalt May 18, 2021
8244882
rebuilding lib
kalwalt May 18, 2021
d787bb0
merging conflicts
kalwalt May 18, 2021
0c291d5
reapply changes (merging failed?)
kalwalt May 18, 2021
1181247
removing ThreejsRenderer class
kalwalt May 19, 2021
f307695
removing old Babylonjs lib from the examples
kalwalt May 19, 2021
c74969b
new containerEvent
kalwalt May 20, 2021
9737813
added uuid
kalwalt May 20, 2021
71aa1d3
using dev version of ARnft-threejs
kalwalt May 20, 2021
b7d5e81
testing new NFTaddTJS class
kalwalt May 20, 2021
8bc1ca5
testing ARnft-threejs in some examples
kalwalt May 21, 2021
bf5f283
using the new getters in the examples
kalwalt May 22, 2021
1da2709
using dev branch of ARnft-threejs
kalwalt May 22, 2021
b65e958
event example works now as expected
kalwalt May 22, 2021
aafaf25
simple example update
kalwalt May 22, 2021
93060f8
fix for objVisibility and removing renderer
kalwalt May 22, 2021
a3dec91
removing not necessary this.renderer
kalwalt May 22, 2021
edcbb0b
version from package.json version
kalwalt May 22, 2021
9584a52
added warning about npm transfer
kalwalt May 22, 2021
ec5afb2
using main branch
kalwalt May 22, 2021
7377ebc
0.9.0-beta version
kalwalt May 22, 2021
d69ed3b
included ARnftThreejs.js library
kalwalt May 24, 2021
3d86363
added .npmignore to exclude examples files
kalwalt May 24, 2021
7d4ece1
new 0.9.0 webarkit version!
kalwalt May 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .npmignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
examples/**/*
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,5 +71,6 @@ You can try also a live example with React at this link: [kalwalt.github.io/ARnf
```
npm i @kalwalt/ar-nft
```
❗️👉️ from 0.9.0 version npm package updates only from Webarkit npmjs package profile !!

- Configuration data in an External .json file.
3 changes: 1 addition & 2 deletions dist/ARnft.js
View file
Open in desktop

Large diffs are not rendered by default.

116 changes: 80 additions & 36 deletions examples/arNFT_container_example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,101 @@
<!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">
<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>
<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="../dist/ARnft.js"></script>
<script src="js/third_party/three.js/three.min.js"></script>
<script src="js/ARnftThreejs.js"></script>
<script src="../dist/ARnft.js"></script>

<script>
// This example not create the Html elements for loading, stats and container app.
// But instead you define in your html code. See 'config-container.json' for the set-up.
ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config-container.json', 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);
nft.add(cube);
}).catch((error) => {
console.log(error);
});
// This example not create the Html elements for loading, stats and container app.
// But instead you define in your html code. See 'config-container.json' for the set-up.
ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config-container.json', 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 = window.clientWidth / window.clientHeight;
let config = {
"renderer": {
"alpha": true,
"antialias": true,
"context": null,
"precision": "mediump",
"premultipliedAlpha": true,
"stencil": true,
"depth": true,
"logarithmicDepthBuffer": true,
"objVisibility": false
},
"camera": {
"fov": fov,
"ratio": ratio,
"near": 0.01,
"far": 1000
}
}

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

let nftAddTJS = new ARnftThreejs.NFTaddTJS(root);
nftAddTJS.add(cube);

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

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

<div id="stats" class="ui stats">
<div id="stats1" class="stats-item">
<div id="stats" class="ui stats">
<div id="stats1" class="stats-item">
<p class="stats-item-title">Main</p>
</div>
<div id="stats2" class="stats-item">
</div>
<div id="stats2" class="stats-item">
<p class="stats-item-title">Worker</p>
</div>
</div>
</div>
</div>

<div id="loading">
<img src="Data/arNFT-logo.gif" alt="arNFT.js logo">
<span class="loading-text">Loading, please wait...</span>
<img src="Data/arNFT-logo.gif" alt="arNFT.js logo">
<span class="loading-text">Loading, please wait...</span>
</div>

<div id="app">
<canvas id="canvas" width="640" height="480"></canvas>
<video id="video" muted playsinline autoplay></video>
<canvas id="canvas" width="640" height="480"></canvas>
<video id="video" muted playsinline autoplay></video>
</div>
</body>

</html>
</html>
100 changes: 70 additions & 30 deletions examples/arNFT_event_example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,85 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>ARnft event 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">
<meta charset="utf-8">
<title>ARnft event 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>
<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="../dist/ARnft.js"></script>
<script src="js/third_party/three.js/three.min.js"></script>
<script src="js/ARnftThreejs.js"></script>
<script src="../dist/ARnft.js"></script>

<script>
ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config-event.json', 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);
nft.add(cube);
// we add a rotation to the cube onto the z axis
requestAnimationFrame(function animate(){
cube.rotation.z += 0.02;
requestAnimationFrame( animate );
})
document.addEventListener('nftTrackingLost', function(ev) {
ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config-event.json', 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 = window.clientWidth / window.clientHeight;
let config = {
"renderer": {
"alpha": true,
"antialias": true,
"context": null,
"precision": "mediump",
"premultipliedAlpha": true,
"stencil": true,
"depth": true,
"logarithmicDepthBuffer": true,
"objVisibility": true
},
"camera": {
"fov": fov,
"ratio": ratio,
"near": 0.01,
"far": 1000
}
}

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

let nftAddTJS = new ARnftThreejs.NFTaddTJS(root);
nftAddTJS.add(cube);

const tick = () => {
sceneThreejs.draw();
cube.rotation.z += 0.02;
window.requestAnimationFrame(tick)
}
tick()
})

document.addEventListener('nftTrackingLost', function (ev) {
console.log(ev);
console.log("lost marker");
})
}).catch((error) => {
console.log(error);
});
}).catch((error) => {
console.log(error);
});
</script>
</body>

</html>
</html>
93 changes: 69 additions & 24 deletions examples/arNFT_example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,81 @@
<!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">
<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>
<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="../dist/ARnft.js"></script>
<script src="js/third_party/three.js/three.min.js"></script>
<script src="js/ARnftThreejs.js"></script>
<script src="../dist/ARnft.js"></script>

<script>
ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config.json', 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);
nft.add(cube);
}).catch((error) => {
console.log(error);
});
ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config.json', 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 = window.clientWidth / window.clientHeight;
let config = {
"renderer": {
"alpha": true,
"antialias": true,
"context": null,
"precision": "mediump",
"premultipliedAlpha": true,
"stencil": true,
"depth": true,
"logarithmicDepthBuffer": true,
"objVisibility": false
},
"camera": {
"fov": fov,
"ratio": ratio,
"near": 0.01,
"far": 1000
}
}

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

let nftAddTJS = new ARnftThreejs.NFTaddTJS(root);
nftAddTJS.add(cube);

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

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

</body>

</html>
</html>
Loading