awacke1/HTML5-Aframe-Augmented-Reality-Model-Viewer
4
1<!DOCTYPE html>2<html>3 <head>4 <meta charset="utf-8">5 <title>Model Viewer AR - VR</title>6 <meta name="description" content="Model Viewer (VR / AR) • A-Frame">7 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />8 9 <!-- Replace library URLs with CDN links -->10 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>11 <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v5.1.0/dist/aframe-extras.min.js"></script>12 <script src="https://cdn.rawgit.com/donmccurdy/aframe-animation-component/v4.1.2/dist/aframe-animation-component.min.js"></script>13 <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.3.2/aframe/build/aframe-ar.js"></script>14 15 <!-- Define code for the 3D model viewer -->16 <script>17 AFRAME.registerComponent('model-viewer', {18 schema: {19 gltfModel: { type: 'string', default: '' },20 title: { type: 'string', default: '' }21 },22 23 init: function () {24 var data = this.data;25 var el = this.el;26 27 el.setAttribute('scale', '0.2 0.2 0.2');28 el.setAttribute('position', '0 1.5 -4');29 30 el.setAttribute('gltf-model', data.gltfModel);31 el.setAttribute('title', data.title);32 }33 });34 </script>35 </head>36 37 <body>38 <a-scene39 renderer="colorManagement: true;"40 arjs41 model-viewer="gltfModel: #triceratops; title: Triceratops">42 <a-assets timeout="10000">43 <a-asset-item id="triceratops"44 src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"45 response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>46 47 <img id="shadow" src="shadow.png"></img>48 <a-asset-item id="messageText" src="message.html"></a-asset-item>49 </a-assets>50 51 <!-- Create the model viewer element -->52 <a-entity id="model-viewer"></a-entity>53 </a-scene>54 </body>55</html>56