topical media & game development

talk show tell print

mobile-query-three-plugins-pacman-tmp-ghost.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle.js"></script>
  <script src="excanvas.js"></script>
  <script src="Threex.TextureSmiley.js"></script>
  
  <body><script>
          var world        = tQuery.createWorld().boilerplate().start();
  
          // put some lights        
          tQuery.createAmbientLight().addTo(world)
                  .color(0x444444)
          tQuery.createDirectionalLight().addTo(world)
                  .position(1,1,1)
                  //.color()
  
          // build the canvas + texture
          var canvasW        = 256;
          var canvas        = document.createElement('canvas');
          canvas.width        = canvasW;
          canvas.height        = canvasW;
          var texture        = new THREE.Texture(canvas);
          texture.needsUpdate        = true;
          
          // clear the previous texture
          var ctx                = canvas.getContext('2d');
          ctx.fillStyle        = "#ffff00";
          ctx.fillRect(0, 0, canvas.width, canvas.height);
  
          
          THREEx.Texture.Smiley.happy(canvas);
          //THREEx.Texture.Smiley.hurt(canvas);
          //THREEx.Texture.Smiley.angry(canvas);
          //THREEx.Texture.Smiley.pupil(canvas);
  
          var sphere        = tQuery.createSphere().addTo(world)
                  .positionY(0.25 + 0.125)
                  .setLambertMaterial()
                          .map(texture)
                          .back()
  
          // build the robe
          tQuery.createCylinder(0.5, 0.5, 0.75, 64).addTo(sphere)
                  .positionY(-0.25 -0.125)
                  .setLambertMaterial()
                          .color(0xffff00)
                          .back()
  
          // add the shadow on the ground
          var texture        = THREEx.Texture.Smiley.shaddowTexture();
          tQuery.createPlane().addTo(world)
                  .rotationX(-Math.PI/2)
                  .positionY(-0.5)
                  .setLambertMaterial()
                          .map(texture)
                          .opacity(0.5)
                          .back();
          
  </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.