topical media & game development

topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
graphic-webgl-scenejs-examples-node-rendered-event-index.htm / htm

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
      <title></title>
  
       <link href="graphic-webgl-scenejs-examples-web-style.css" rel="stylesheet" type="text/css"/>
  
      <style type="text/css">
          .transparent-ui {
              opacity: .75;
          }
  
          .container {
              z-index: 0;
          }
  
          #teapot1 {
              position: absolute;
              width: 180px;
              height: 90px;
              clear: both;
              padding: 8px;
              overflow: hidden;
              background: red;
              color: white;
              z-index: 2;
              margin: 0 auto;
              border: 1px solid;
              text-align: left;
              -webkit-box-shadow: #444 5px 5px 2px;
              border-bottom-left-radius: 5px 5px;
              border-bottom-right-radius: 5px 5px;
              border-top-left-radius: 5px 5px;
              border-top-right-radius: 5px 5px;
          }
  
          #teapot2 {
              position: absolute;
              width: 180px;
              height: 90px;
              clear: both;
              padding: 8px;
              overflow: hidden;
              background: green;
              color: white;
              z-index: 2;
              margin: 0 auto;
              border: 1px solid;
              text-align: left;
              -webkit-box-shadow: #444 5px 5px 2px;
              border-bottom-left-radius: 5px 5px;
              border-bottom-right-radius: 5px 5px;
              border-top-left-radius: 5px 5px;
              border-top-right-radius: 5px 5px;
          }
  
          #teapot3 {
              position: absolute;
              width: 180px;
              height: 90px;
              clear: both;
              padding: 8px;
              overflow: hidden;
              background: blue;
              color: white;
              z-index: 2;
              margin: 0 auto;
              border: 1px solid;
              text-align: left;
              -webkit-box-shadow: #444 5px 5px 2px;
              border-bottom-left-radius: 5px 5px;
              border-bottom-right-radius: 5px 5px;
              border-top-left-radius: 5px 5px;
              border-top-right-radius: 5px 5px;
          }
      </style>
  
      <script type="text/javascript" src="graphic-webgl-scenejs-lib-scenejs.js"></script>
      <script type="text/javascript" src="graphic-webgl-scenejs-examples-web-libs-jquery-jquery.min.js"></script>
  
  </head>
  <body>
  <div id="container" class="container">
      <div id="header">
          <div id="header-nav">
  
          </div>
          <div id="header-inner">
              <h1><a href="http://scenejs.org">SceneJS</a> &gt; <a href="graphic-webgl-scenejs-examples-grid-index.htm">Examples</a> &gt;&nbsp;Node
                  "rendered" event
              </h1>
              <a class="a2a_dd" href="http://www.addtoany.com/share_save?linkname=s&linkurl=s"><img
                      src="http://static.addtoany.com/buttons/share_save_171_16.png" width="171" height="16" border="0"
                      alt="Share/Bookmark"/></a>
              <script type="text/javascript">
                  var a2a_linkname = "SceneJS.utils.query.QueryNodePos";
                  var a2a_linkurl = window.location;
                  var a2a_onclick = 1;</script>
              <script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
          </div>
      </div>
      <div id="content">
          <canvas id="theCanvas" width="1030" height="700">
              <p>This example requires a browser that supports the
                  <a href="http://www.w3.org/html/wg/html5/">HTML5</a>
                  &lt;canvas&gt; feature.</p>
          </canvas>
          <div id="info">
              <h1>Querying World, View and Canvas-space origins</h1>
  
              <p>Querying node World, View and Canvas-space origins via a "rendered" event.</p>
  
              <p>For each of these teapots we're listening to "rendered" events on their scene nodes, which report
                  their centre points in various coordinate systems, along with the Model, View and Projection matrices
                  that are applied to them.</p>
  
              <p>Using the Canvas space centers, we can then float a DIV over each teapot on the canvas to report its
                  center points.</p>
  
              <ul>
                  <li><a target="_other" href="graphic-webgl-scenejs-examples-node-rendered-event-node-rendered-event.js">Scene source code</a></li>
                 
              </ul>
          </div>
          <div id="log">
              <h3>Log</h3>
  
              <div id="theLoggingDiv"></div>
          </div>
      </div>
  </div>
  
  <div id="teapot1" class="transparent-ui">
      Teapot 1
  </div>
  
  <div id="teapot2" class="transparent-ui">
      Teapot 2
  </div>
  
  <div id="teapot3" class="transparent-ui">
      Teapot 3
  </div>
  
  <script type="text/javascript" src="graphic-webgl-scenejs-examples-node-rendered-event-node-rendered-event.js"></script>
  
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _
You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.