|
<!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> |
|
|
