Making Buildings Visible
<base-viewer>
A customizable, mobile friendly 3D viewer for building interiors.
Basic Example
<head>
<link rel="import" href="https://code.archilogic.com/viewer/1.0.1/interior-viewer.html">
</head>
<body>
<base-viewer src="/3d-assets/some-building.ms.json" style="width:500px;height:300px;" />
</body>Customized Viewer Example
<head>
<style>
.topbox {
position: absolute;
top: 5px;
left: 5px;
}
.bottombox {
position: absolute;
bottom: 5px;
left: 5px;
}
.fadeIn { … }
</style>
<link rel="import" href="https://code.archilogic.com/viewer/1.0.1/interior-viewer.html">
</head>
<body>
<base-viewer id="myViewer">
<base-loading-screen style="background:#f0f0f0">
<img src="my-company-logo.svg">
</base-loading-screen>
<data src="./3d-assets/some-building.ms.json" />
<base-webgl-renderer/>
<base-viewport>
<base-sky-map type="cylinder" src="panorama.jpg" scale="2" offsetY="-0.2"/>
<base-filter type="wireframe"/>
<base-controls>
<base-mouse pitch-lock="true"/>
<base-keyboard />
<base-touchscreen />
</base-controls>
</base-viewport>
<base-camera y="1.65" yaw="72">
<base-bookmark title="Bathroom" … />
<base-bookmark title="Living Room" … />
<base-bookmark id="cam-living-room" hide-in-menu="true" … />
</base-camera>
</base-viewer>
<div class="topbox">
<img class="logo fadeIn" src="…" alt="MyCorp" />
<archilogic-level-menu />
</div>
<div class="bottombox">
<base-cam-bookmarks-menu />
<base-camera-menu floorplan bird person /> <!-- use boolean attributes where appropriate! -->
</div>
<button class="cta" style="bottom: 5px; right: 5px;">Get your own 3D model</button>
<script>
let myViewer = document.querySelector("interior-viewer#myViewer")
myViewer.camera.stop()
console.log(myViewer.camera.getPosition())
</script>
</body>More Examples
API
Technology
Open source, web based and optimized for mobile.
- Render engine: WebGL
- Data format: base3d
- Browser compatibility: Chrome v18+, Firefox v24+, Safari v8+, Edge v12+, IE v11