topical media & game development

talk show tell print

mobile-query-three-plugins-objectcoord-examples-demo.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle-require.js"></script>
  <script src="../tquery.object3d.coordinate.js"></script>
  <body><script>
  require([ 'tquery.minecraft',
          , 'tquery.grassground'
          , 'tquery.montainarena'
  ], function(){
  
          var world        = tQuery.createWorld().boilerplate().start();
  
          var ground        = tQuery.createGrassGround({
                  textureRepeatX        : 20,
                  textureRepeatY        : 20,
          }).addTo(world)
                  .scale(40)
  
          tQuery.MontainArena.createBasicArena().addTo(world)
                  .scale(40)
  
          var character        = tQuery.createMinecraftChar().addTo(world)
          tQuery.createMinecraftCharKeyboard2({
                  object3D        : character.object3D(),
          });
          
          
          var marker        = tQuery.createObject3D().addTo( character.object3D() )
                  .positionY(1.2)
  
          // Create dom element
          var element        = document.createElement('div')
          document.body.appendChild(element)
          element.innerHTML        = 'John';        
          element.style.position        = 'absolute'
          element.style.padding        = '5px'
          element.style.background= 'red'
          // move it at the object position
          world.loop().hook(function(){
                  var position        = marker.cssPosition();
                  element.style.left        = (position.x-element.offsetWidth /2)+'px';
                  element.style.top        = (position.y-element.offsetHeight/2)+'px';
          })
  })
  </script></body>


(C) Æliens 04/09/2009

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.