Skip to content

Commit

Permalink
bunch of examples updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalwalt
kalwalt committed Nov 1, 2024
1 parent ff6aa3c commit ed5e2fc
Show file tree
Hide file tree
Showing 6 changed files with 95 additions and 36 deletions.
26 changes: 19 additions & 7 deletions examples/arNFT_autoupdate_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,26 @@
🖼 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 type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"arnft-threejs": "./js/ARnftThreejs.module.js",
"arnft": "./../dist/ARnft.module.js"
}
}
</script>

<script type="module">
import * as THREE from 'three'
import arnft from 'arnft'
const { ARnft } = arnft
import ARnftThreejs from 'arnft-threejs'
const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;

<script>
let width = 640;
let height = 480;
ARnft.ARnft.initWithConfig({
ARnft.initWithConfig({
width: width,
height: height,
markerUrls: [["examples/DataNFT/pinball"]],
Expand Down Expand Up @@ -60,10 +72,10 @@
},
};

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

let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
let nftAddTJS = new NFTaddTJS(nft.uuid);
nftAddTJS.add(cube, "pinball", false);

const fpsInterval = 1000 / 30;
Expand Down
26 changes: 19 additions & 7 deletions examples/arNFT_container_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,28 @@
🖼 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 type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"arnft-threejs": "./js/ARnftThreejs.module.js",
"arnft": "./../dist/ARnft.module.js"
}
}
</script>

<script type="module">
import * as THREE from 'three'
import arnft from 'arnft'
const { ARnft } = arnft
import ARnftThreejs from 'arnft-threejs'
const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;

<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.
let width = 640;
let height = 480;
ARnft.ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config-container.json', true)
ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config-container.json', true)
.then((nft) => {
let mat = new THREE.MeshLambertMaterial({
color: 0xff0000
Expand Down Expand Up @@ -58,11 +70,11 @@
}
}

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

let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
let nftAddTJS = new NFTaddTJS(nft.uuid);
nftAddTJS.add(cube, 'pinball', false);

const tick = () => {
Expand Down
26 changes: 19 additions & 7 deletions examples/arNFT_event_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,30 @@
</a>
<div class="ui" id="dispose" title="click to dispose ARnft and the video stream" onclick="window.closeVideo()">Dispose ARnft</div>

<script src="js/third_party/three.js/three.min.js"></script>
<script src="js/ARnftThreejs.js"></script>
<script src="../dist/ARnft.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"arnft-threejs": "./js/ARnftThreejs.module.js",
"arnft": "./../dist/ARnft.module.js"
}
}
</script>

<script type="module">
import * as THREE from 'three'
import arnft from 'arnft'
const { ARnft } = arnft
import ARnftThreejs from 'arnft-threejs'
const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;

<script>
window.addEventListener('initARnft', function (e) {
console.log("ARnft is starting!");
})
let nftOut;
let width = 640;
let height = 480;
ARnft.ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config-event.json', true)
ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config-event.json', true)
.then((nft) => {
let mat = new THREE.MeshLambertMaterial({
color: 0xff0000
Expand Down Expand Up @@ -61,10 +73,10 @@
}
}

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

let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
let nftAddTJS = new NFTaddTJS(nft.uuid);
nftAddTJS.add(cube, 'pinball', true);

const tick = () => {
Expand Down
1 change: 0 additions & 1 deletion examples/arNFT_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
"arnft-threejs": "./js/ARnftThreejs.module.js",
"arnft": "./../dist/ARnft.module.js"
}
Expand Down
26 changes: 19 additions & 7 deletions examples/arNFT_gltf_brave_robot_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,26 @@
🖼 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 type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"arnft-threejs": "./js/ARnftThreejs.module.js",
"arnft": "./../dist/ARnft.module.js"
}
}
</script>

<script type="module">
import * as THREE from 'three'
import arnft from 'arnft'
const { ARnft } = arnft
import ARnftThreejs from 'arnft-threejs'
const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;

<script>
let width = 640;
let height = 480;
ARnft.ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config_brave_robot.json', true)
ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config_brave_robot.json', true)
.then((nft) => {
document.addEventListener('containerEvent', function (ev) {

Expand All @@ -48,7 +60,7 @@
}
}

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

Expand All @@ -60,7 +72,7 @@
directionalLight.position.set(0.5, 0, 0.866);
scene.add(directionalLight)

let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
let nftAddTJS = new NFTaddTJS(nft.uuid);
// gLTF model provided by Brett Alistair Kromkamp https://github.com/brettkromkamp
nftAddTJS.addModel('./Data/models/brave_robot/gLTF/brave_robot.glb', 'pinball', 80, false);

Expand Down
26 changes: 19 additions & 7 deletions examples/arNFT_gltf_example.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,26 @@
🖼 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 type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
"arnft-threejs": "./js/ARnftThreejs.module.js",
"arnft": "./../dist/ARnft.module.js"
}
}
</script>

<script type="module">
import * as THREE from 'three'
import arnft from 'arnft'
const { ARnft } = arnft
import ARnftThreejs from 'arnft-threejs'
const { SceneRendererTJS, NFTaddTJS } = ARnftThreejs;

<script>
let width = 640;
let height = 480;
ARnft.ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config.json', true)
ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config.json', true)
.then((nft) => {
document.addEventListener('containerEvent', function (ev) {

Expand All @@ -48,7 +60,7 @@
}
}

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

Expand All @@ -60,7 +72,7 @@
directionalLight.position.set(0.5, 0, 0.866);
scene.add(directionalLight)

let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
let nftAddTJS = new NFTaddTJS(nft.uuid);
nftAddTJS.addModel('./Data/models/Duck/glTF/Duck.glb', 'pinball', 80, false);
const tick = () => {
sceneThreejs.draw();
Expand Down

0 comments on commit ed5e2fc

Please sign in to comment.