npm

Need private packages and team management tools?Check out npm Orgs. »

base-viewer

0.0.1-a • Public • Published

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>

Edit in JS fiddle

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>

Edit in JS fiddle

More Examples

Example collection

API

API Reference

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

Contribute

Development page

Keywords

none

install

npm i base-viewer

Downloadsweekly downloads

2

version

0.0.1-a

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
Report a vulnerability