| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Model Viewer AR - VR</title> |
| <meta name="description" content="Model Viewer (VR / AR) • A-Frame"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> |
|
|
| |
| <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> |
| <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v5.1.0/dist/aframe-extras.min.js"></script> |
| <script src="https://cdn.rawgit.com/donmccurdy/aframe-animation-component/v4.1.2/dist/aframe-animation-component.min.js"></script> |
| <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/2.3.2/aframe/build/aframe-ar.js"></script> |
|
|
| |
| <script> |
| AFRAME.registerComponent('model-viewer', { |
| schema: { |
| gltfModel: { type: 'string', default: '' }, |
| title: { type: 'string', default: '' } |
| }, |
| |
| init: function () { |
| var data = this.data; |
| var el = this.el; |
| |
| el.setAttribute('scale', '0.2 0.2 0.2'); |
| el.setAttribute('position', '0 1.5 -4'); |
| |
| el.setAttribute('gltf-model', data.gltfModel); |
| el.setAttribute('title', data.title); |
| } |
| }); |
| </script> |
| </head> |
|
|
| <body> |
| <a-scene |
| renderer="colorManagement: true;" |
| arjs |
| model-viewer="gltfModel: #triceratops; title: Triceratops"> |
| <a-assets timeout="10000"> |
| <a-asset-item id="triceratops" |
| src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf" |
| response-type="arraybuffer" crossorigin="anonymous"></a-asset-item> |
|
|
| <img id="shadow" src="shadow.png"></img> |
| <a-asset-item id="messageText" src="message.html"></a-asset-item> |
| </a-assets> |
|
|
| |
| <a-entity id="model-viewer"></a-entity> |
| </a-scene> |
| </body> |
| </html> |
|
|
