File size: 1,985 Bytes
0a19143 25dd7d3 0a19143 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!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" />
<!-- Replace library URLs with CDN links -->
<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>
<!-- Define code for the 3D model viewer -->
<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>
<!-- Create the model viewer element -->
<a-entity id="model-viewer"></a-entity>
</a-scene>
</body>
</html>
|