webarkit · kalwalt · Oct 20, 2020 · Oct 16, 2020 · Oct 16, 2020 · Oct 16, 2020
diff --git a/README.md b/README.md
@@ -33,6 +33,7 @@ Test the examples in the `/examples` folder:
 - `arNFT_example.html` The simplest example displaying a red cube.
 - `arNFT_image_example.html` Example showing an image.
 - `arNFT_gltf_example.html` Example showing a gltf model (Duck).
+- `arNFT_video_example.html` Example showing a video.
 You can try also a live example with React at this link: [kalwalt.github.io/ARnft-ES6-react/](https://kalwalt.github.io/ARnft-ES6-react/)
 
 ## Features

diff --git a/dist/ARnft.js b/dist/ARnft.js
diff --git a/examples/arNFT_example.html b/examples/arNFT_example.html
@@ -26,12 +26,10 @@
 				let cube = new THREE.Mesh(cubeGeom, mat);
 				cube.position.z = 90;
 				cube.scale.set(180,180,180);
-
 				nft.add(cube);
 			}).catch((error) => {
 				console.log(error);
 			});
-
     </script>
 </body>
 

diff --git a/examples/arNFT_gltf_example.html b/examples/arNFT_gltf_example.html
@@ -21,11 +21,10 @@
     <script>
 			ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config.json', true)
 			.then((nft) => {
-				nft.loadModel('./Data/models/Duck/glTF/Duck.glb', 40, 80, 80, 80);
+				nft.addModel('./Data/models/Duck/glTF/Duck.glb', 40, 80, 80, 80);
 			}).catch((error) => {
 				console.log(error);
 			});
-
     </script>
 </body>
 

diff --git a/examples/arNFT_image_example.html b/examples/arNFT_image_example.html
@@ -21,11 +21,10 @@
     <script>
 			ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config.json', true)
 			.then((nft) => {
-				nft.showImage('./Data/aframe-k.png', 0xbbbbff, 180);
+				nft.addImage('./Data/aframe-k.png', 0xbbbbff, 180);
 			}).catch((error) => {
 				console.log(error);
 			});
-
     </script>
 </body>
 

diff --git a/examples/arNFT_video_example.html b/examples/arNFT_video_example.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>ARnft example showing a video</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>
+			<video
+				loop
+				autoplay
+				muted
+				webkit-playsinline
+				playsinline
+				crossOrigin="anonymous"
+				id="arvideo">
+				<source src="https://avo-content-dev.s3.amazonaws.com/videos/bg_1588085276090.mp4" type='video/mp4'>
+			</video>
+
+		<script src="js/third_party/three.js/three.min.js"></script>
+		<script src="../dist/ARnft.js"></script>
+
+    <script>
+			ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config.json', true)
+			.then((nft) => {
+				nft.addVideo('arvideo', 180);
+			}).catch((error) => {
+				console.log(error);
+			});
+    </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kalwalt/ar-nft",
-  "version": "0.7.6",
+  "version": "0.7.7",
   "main": "dist/ARnft.js",
   "description": "WebAR Javscript library for markerless AR",
   "keywords": [
@@ -33,7 +33,7 @@
     "url": "https://github.com/kalwalt/ARnft/issues"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.1",
+    "@babel/core": "^7.12.3",
     "@babel/plugin-transform-runtime": "^7.12.1",
     "@babel/preset-env": "^7.12.1",
     "axios": "^0.20.0",
@@ -56,7 +56,7 @@
     "worker-loader": "^3.0.4"
   },
   "scripts": {
-    "dev-es6": "webpack --mode development --progress --colors --watch",
+    "dev-es6": "webpack --mode development --progress --watch",
     "build-es6": "webpack --mode production",
     "build-jshint": "grunt jshint --force",
     "watch": "./node_modules/.bin/watch 'npm run build' ./js/"

diff --git a/src/ARnft.js b/src/ARnft.js
@@ -13,7 +13,7 @@ export default class ARnft {
     this.root.matrixAutoUpdate = false
     this.config = config
     this.listeners = {}
-    this.version = '0.7.6'
+    this.version = '0.7.7'
     console.log('ARnft ', this.version)
   }
 
@@ -99,7 +99,7 @@ export default class ARnft {
     root.add(obj)
   }
 
-  loadModel (url, x, y, z, scale) {
+  addModel (url, x, y, z, scale) {
     const root = this.root
     let model
 
@@ -108,7 +108,7 @@ export default class ARnft {
 
     threeGLTFLoader.load(url, gltf => {
       model = gltf.scene
-      model.scale.set(80, 80, 80)
+      model.scale.set(scale, scale, scale)
       model.rotation.x = Math.PI / 2
       model.position.x = x
       model.position.y = y
@@ -118,7 +118,7 @@ export default class ARnft {
     })
   }
 
-  showImage (url, color, scale) {
+  addImage (url, color, scale) {
     const root = this.root
     const texture = new THREE.TextureLoader().load(url)
     const mat = new THREE.MeshLambertMaterial({ color: color, map: texture })
@@ -133,6 +133,23 @@ export default class ARnft {
     root.add(plane)
   }
 
+  addVideo (id, scale) {
+    const root = this.root
+    var ARVideo = document.getElementById(id)
+    var texture = new THREE.VideoTexture(ARVideo)
+    var mat = new THREE.MeshLambertMaterial({ color: 0xbbbbff, map: texture })
+    ARVideo.play()
+    var planeGeom = new THREE.PlaneGeometry(1, 1, 1, 1)
+    var plane = new THREE.Mesh(planeGeom, mat)
+    plane.scale.set(scale, scale, scale)
+    document.addEventListener('getNFTData', (ev) => {
+      var msg = ev.detail
+      plane.position.y = (msg.height / msg.dpi * 2.54 * 10) / 2.0
+      plane.position.x = (msg.width / msg.dpi * 2.54 * 10) / 2.0
+    })
+    root.add(plane)
+  }
+
   dispatchEvent (event) {
     const listeners = this.listeners[event.name]
     if (listeners) {

diff --git a/yarn.lock b/yarn.lock
@@ -14,7 +14,7 @@
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.1.tgz#d7386a689aa0ddf06255005b4b991988021101a0"
   integrity sha512-725AQupWJZ8ba0jbKceeFblZTY90McUBWMwHhkFQ9q1zKPJ95GUktljFcgcsIVwRnTnRKlcYzfiNImg5G9m6ZQ==
 
-"@babel/core@^7.1.6", "@babel/core@^7.12.1":
+"@babel/core@^7.1.6":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.1.tgz#980b115a05929ef3ce1b6af9bf50e5a5cf668667"
   integrity sha512-6bGmltqzIJrinwRRdczQsMhruSi9Sqty9Te+/5hudn4Izx/JYRhW1QELpR+CIL0gC/c9A7WroH6FmkDGxmWx3w==
@@ -36,6 +36,28 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.12.3":
+  version "7.12.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.3.tgz#1b436884e1e3bff6fb1328dc02b208759de92ad8"
+  integrity sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.12.1"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helpers" "^7.12.1"
+    "@babel/parser" "^7.12.3"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.12.1"
+    "@babel/types" "^7.12.1"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.19"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.1.tgz#0d70be32bdaa03d7c51c8597dda76e0df1f15468"
@@ -260,6 +282,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.2.tgz#9d2fcf24cafe85333ab0aff9f26b81bba356004d"
   integrity sha512-LMN+SqTiZEonUw4hQA0A3zG8DnN0E1F4K107LbDDUnC+0chML1rvWgsHloC9weB4RmZweE0uhFq0eGX7Nr/PBQ==
 
+"@babel/parser@^7.12.3":
+  version "7.12.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.3.tgz#a305415ebe7a6c7023b40b5122a0662d928334cd"
+  integrity sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw==
+
 "@babel/plugin-proposal-async-generator-functions@^7.12.1":
   version "7.12.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e"