<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DRAFT4D - CHUG VR Museum Rooms Test</title>
<meta name="description" content="Basic example for Room component."></meta>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-room-component/dist/aframe-room-component.min.js"></script>
</head>
<body>
<!-- welcome screen
<div id="container" class="container">
<div class="info">
<div class="company"><a href="http://www.chugachmiut.org" target="_blank">chugachmiut.org</a></div>
<div class="title">Virtual Museum Prototype</div>
<div class="logo"><a href="http://www.chugachmiut.org" target="_blank"><img src="img/CHUGlogo.png"></a></div>
<a class="button" id="start_experience" href="#">start experience</a>
<div class="instructions">
<div><strong>VR</strong>: Hand controllers and teleport with trigger.</div>
<div><strong>Desktop</strong>: Keyboard (WASD/arrows) and mouse.</div>
<div><strong>Mobile</strong>: Gaze cursor and teleportation.</div>
</div>
</div>
</div> -->
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<meta name="description" content="Chugachmiut VR Museum Prototype">
<link rel="stylesheet" type="text/css" href="style.css">
<a-scene inspector="url: https://aframe.io/releases/0.3.0/aframe-inspector.min.js"> <!-- Start Scene -->
<!-- Assets -->
<a-assets>
<img id="blueWall" src="img/A2-WhoWeAre2_V2-01.jpg">
<img id="LangWall" src="img/A3-Our Language 1_V2-01.jpg">
<img id="KnowWall" src="img/B2-What We Know_V2-01.jpg">
<img id="ChildWall" src="img/E4-Childhood_V2-01.jpg">
<img id="entryWelcome" src="img/Entry_V1-01wider2.jpg">
<img id="floorMat" src="img/hardwood-floor.jpg">
<img id="groundTexture" src="img/groundSample3-DSC_0094.jpg">
<img id="skyTexture" src="img/chugTestBgd2b.jpg">
<img id="outsideWall" src="img/8362623363_8ca3fc1cdb_k.jpg">
<video id="CHUGvideo1" muted autoplay loop="true" src="video/MVI_3490-360.mp4" crossorigin="anonymous" playsinline webkit-playsinline/>
<!-- <video id="CHUGvideo2" autoplay loop="true" src="video/CHUGtest2.mp4" webkit-playsinline/> -->
<!-- <a-asset-item id="spoon-obj" src="img/Photoscan_antler_spoon_fromRecapPhoto.obj"></a-asset-item>
<a-asset-item id="spoon-mtl" src="img/Photoscan_antler_spoon_fromRecapPhoto.mtl"></a-asset-item> -->
<a-asset-item id="bowl-obj" src="obj/womanBowlEdit2/womanBowlEdit2.obj"></a-asset-item>
<a-asset-item id="bowl-mtl" src="obj/womanBowlEdit2/womanBowlEdit2.mtl"></a-asset-item>
<!-- Image link template to be reused. -->
<script id="link" type="text/html">
<a-entity class="link"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
event-set__1="_event: mousedown; scale: 1 1 1"
event-set__2="_event: mouseup; scale: 1.2 1.2 1"
event-set__3="_event: mouseenter; scale: 1.2 1.2 1"
event-set__4="_event: mouseleave; scale: 1 1 1"
set-image="on: click; target: #CHUGvideo1; src: ${src}"
sound="on: click; src: #click-sound"></a-entity>
</script>
</a-assets>
<!-- Ambient sound -->
<a-sound src="audio/waves.mp3" autoplay="true"
position="0 -13 -20" loop="true" volume="0.5"></a-sound>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity template="src: #link" data-src="#CHUGvideo1"></a-entity>
</a-entity>
<!-- Camera Functions -->
<a-entity id="myCameraPosition" position="0 -11.5 1">
<a-entity id="myCamera" camera look-controls keyboard-controls wasd-controls>
</a-entity>
</a-entity>
<!-- Outside Sky & Ground -->
<a-sky height="2048" radius="90" src="#skyTexture" theta-length="150" width="2048" segments-height="5" segments-width="8"></a-sky>
<a-plane src="#groundTexture" rotation="-90 0 0" position="0 -13.01 0" height="150" width="150"></a-plane>
<!-- Lighting -->
<a-light light="decay:1.14;intensity:1.74;type:spot;penumbra:1;distance:5.18;castShadow:true;shadowBias:0.14;color:#f0fffa;angle:59.94" visible="true" scale="0 0 0.48" rotation="-103.06 0 0" type="directional" intensity="1.0" position="0.01 -10 -0.2"></a-light>
<a-light type="ambient" intensity="0.65" position=" 2 -10 -1"></a-light>
<!-- First Room -->
<rw-room position="-2.5 -13 -2.5" width="5" length="5" height="3"> <!-- Start First Room -->
<a-box geometry="primitive:box" material="" visible="true" scale="1 .75 1" rotation="0 0 0" position="2.5 .25 2.5"></a-box>
<rw-wall material="src: #KnowWall; repeat:0.2 0.325">
<a-video src="#CHUGvideo1" width="1.469" height=".85" position="3.64 2.13 0"></a-video>
</rw-wall>
<rw-wall material="src: #blueWall; repeat:0.2 0.325">
<!-- <a-video src="#CHUGvideo2" width="1" height=".58" position="3.05 2.18 0"></a-video> -->
</rw-wall>
<rw-wall material="src: #LangWall; repeat:0.2 0.325">
<rw-doorhole id="frontInner"></rw-doorhole>
</rw-wall>
<rw-wall material="src: #ChildWall; repeat:0.2 0.325">
</rw-wall>
<!-- First Room Floor -->
<rw-floor material="src: #floorMat; repeat: 0.1 0.1;">
</rw-floor>
<!-- First Room Ceiling -->
<rw-ceiling material="color:#543">
</rw-ceiling>
</rw-room> <!-- End Blue Room -->
<!-- Outside Room -->
<rw-room position="0 -13 0" outside="true" material="src: #outsideWall; repeat: 0.3 0.3">
<rw-wall position="-3 0 -3" height="3">
</rw-wall>
<rw-wall position=" 3 0 -3" height="3">
</rw-wall>
<rw-wall position=" 3 0 3" height="3">
</rw-wall>
<rw-wall material="src: #entryWelcome; repeat: 0.165 0.3;" position="-3 0 3" height="3">
<rw-doorhole id="frontOuter"></rw-doorhole>
<rw-doorlink from="#frontInner" to="#frontOuter" material="color:#543" width=".97" height="1.94" position="4.21 0.5 0">
<rw-floor></rw-floor>
<rw-ceiling></rw-ceiling>
<rw-sides></rw-sides>
</rw-doorlink>
</rw-wall>
</rw-room>
<!-- bowl object -->
<a-entity obj-model="obj: #bowl-obj; mtl: #bowl-mtl"></a-entity>
<a-obj-model rotation="90 90 09" position="0 -10 0">
<a-animation attribute="rotation"
dur="10000"
fill="forwards"
to="0 360 0"
repeat="indefinite"></a-animation>
</a-obj-model>
</a-scene> <!-- End Scene -->
</body>
</html>