hsml_primitives.html

<!DOCTYPE HSML>
<hsml>
  <environment>

    <!-- primitives -->

    <camera type="perspective"></camera>

    <plane edges="8">
      <surface><h1>An octogon</h1></surface>
    </plane>

    <pyramid sides="3">
      <surface><h1>Face 1</h1></surface>
      <surface><h1>Face 2</h1></surface>
      <surface><h1>Face 3</h1></surface>
      <surface><h1>Face 4</h1></surface>
    </pyramid>

    <cube>
      <surface orient="front">
        <h1>Hello World</h1>
        <div class="intro">
          <p>This is absolutely positioned in 3d space!</p>
        </div>
        <span>I'm beind the intro in the 3rd dimension!!</span>
      </surface>
      <surface orient="back"><h1>Goodbye, World</h1></surface>
    </cube>

    <sphere>
      <surface><h1>Whole Sphere Surface</h1></surface>
    </sphere>

    <model src="/models/engine/ignition.3d">
      <surface orient="key">The key</surface> <!-- orient matches a label exported by the model -->
      <surface orient="slot">The slot</surface>
    </model>

    <light type="ambient"></light>
    <light type="point"></light>
    <light type="spot"></light>


    <!-- hyper-surface attributes and elements -->

    <cube> <!-- an index cube -->
      <surface orient="front" href="/apps/clock.js">clock.js</surface>
      <surface orient="back" href="/apps/calculator.js">calculator.js</surface>
      <surface orient="top" href="/apps/notepad.js">notepad.js</surface>
      <surface orient="bottom" href="/apps/cli.js">cli.js</surface>
      <surface orient="left" href="/apps/email.js">email.js</surface>
      <surface orient="right" href="/apps/contacts.js">contacts.js</surface>
    </cube>

    <plane edges="64"> <!-- a circular portal -->
      <surface href="/another/environment.html" target="_top"></surface>
    </plane>

    <form action="/messages" method="post"> <!-- a 3d form -->
      <model src="/models/common/pidgen.3d">
        <surface orient="foot-band" connectable="true"></surface> <!-- can attach to other surfaces -->
      </model>
    </form>
    <plane sides="4">
      <surface orient="front">
        <form>
          <p>Subject: <input type="text" name="subject" /></p>
          <p><textarea name="body"></textarea></p>
        </form>
      </surface>
      <surface orient="back">
        <form>
          <p>Attachments: <input type="file" name="attachment" multiple="true" /></p>
        </form>
      </surface>
    </plane>


  </environment>
</hsml>