mirror of
https://github.com/neon443/neon443.github.io.git
synced 2026-03-11 15:16:18 +00:00
55 lines
2.7 KiB
HTML
55 lines
2.7 KiB
HTML
<!doctype HTML>
|
|
<html>
|
|
<style lang="en" type="text/css" id="night-mode-pro-style">
|
|
body {
|
|
background-color: transparent;
|
|
}
|
|
</style>
|
|
<link type="text/css" rel="stylesheet" id="night-mode-pro-link">
|
|
|
|
<head>
|
|
<title>AR</title>
|
|
<link rel="shortcut icon" href="https://img.icons8.com/fluency/344/augmented-reality.png" type="image/x-icon">
|
|
<meta name="viewport" content="width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=1.0">
|
|
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
|
|
<script src="https://raw.githack.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
|
|
<script src="https://raw.githack.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
|
|
</head>
|
|
<!-- https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf-->
|
|
<body>
|
|
<a-scene embedded arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
|
|
<!-- include assets like 3D models and give them an id to use later -->
|
|
<a-assets>
|
|
<a-assets-item id="dinosaur"
|
|
src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf">
|
|
</a-assets-item>
|
|
<a-assets-item id="robot"
|
|
src="https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf">
|
|
</a-assets-item>
|
|
<a-assets-item id="scenes"
|
|
src="/scene.gltf">
|
|
</a-assets-item>
|
|
</a-assets>
|
|
<!-- recognise different barcode markers ad show digital objects - box/sphere/cylinder/3D-model/image/video/anything -->
|
|
<a-marker type="barcode" value="0">
|
|
<!-- <a-box material="color: red;" scale="0.5 0.5 0.5"></a-box> -->
|
|
<a-entity position="0 0 0" scale="1 1 1" rotation="0 0 0" animation-mixer gltf-model="#robot"></a-entity>
|
|
</a-marker>
|
|
<a-marker type="barcode" value="1">
|
|
<a-entity position="0 0 0" scale="1 1 1" rotation="0 0 0" animation-mixer gltf-model="#robot"></a-entity>
|
|
</a-marker>
|
|
<a-marker type="barcode" value="2">
|
|
<a-cylinder color="#FFC65D" scale="0.5 0.5 0.5"></a-cylinder>
|
|
</a-marker>
|
|
<a-marker type="barcode" value="3">
|
|
<a-entity position="0 0 0" scale="0.06 0.06 0.06" rotation="0 90 0" gltf-model="#dinosaur"></a-entity>
|
|
</a-marker>
|
|
<a-marker type="barcode" value="4">
|
|
<a-entity position="0 0 0" scale="0.06 0.06 0.06" rotation="0 90 0" gltf-model="#scenes"></a-entity>
|
|
</a-marker>
|
|
<!-- adding the camera -->
|
|
<a-entity camera></a-entity>
|
|
</a-scene>
|
|
</body>
|
|
|
|
</html> |