topical media & game development

talk show tell print

mobile-query-three-plugins-minecraft-tmp-index.htm / htm



  <!doctype html><title>Minimal tQuery Page</title>
  <script src="../../../build/tquery-bundle.js"></script>
  
  <body><script>
          var world        = tQuery.createWorld().boilerplate().start();
          var object	= tQuery.createTorus().addTo(world);
          
          world.camera().position.z                = 60;
          world.getCameraControls().rangeX        *= 10;
          world.getCameraControls().rangeY        *= 10;
  
          
Could be replace by a CubeGeometry but would require to change the whole indexing not now.

  
          function cubeFromPlanes (size, mat) {
                  var cube = new THREE.Object3D();
                  var meshes = [];
                  for(var i=0; i < 6; i++) {
                          var mesh = new THREE.Mesh(new THREE.PlaneGeometry(size, size), mat);
                          // mesh.doubleSided = true;
                          cube.add(mesh);
                          meshes.push(mesh);
                  }
                  // Front
                  meshes[0].rotation.x = Math.PI/2;
                  meshes[0].rotation.z = -Math.PI/2;
                  meshes[0].position.x = size/2;
                  
                  // Back
                  meshes[1].rotation.x = Math.PI/2;
                  meshes[1].rotation.z = Math.PI/2;
                  meshes[1].position.x = -size/2;
                  
                  // Top
                  meshes[2].position.y = size/2;
                  
                  // Bottom
                  meshes[3].rotation.y = Math.PI;
                  meshes[3].rotation.z = Math.PI;
                  meshes[3].position.y = -size/2;
                  
                  // Left
                  meshes[4].rotation.x = Math.PI/2;
                  meshes[4].position.z = size/2;
                  
                  // Right
                  meshes[5].rotation.x = -Math.PI/2;
                  meshes[5].rotation.y = Math.PI;
                  meshes[5].position.z = -size/2;
                  
                  return cube;
          };
          function getMaterial(image, transparent) {
                  var tex                = new THREE.Texture(image);
                  tex.magFilter        = THREE.NearestFilter;
                  tex.minFilter        = THREE.NearestFilter;
                  tex.format        = transparent ? THREE.RGBAFormat : THREE.RGBFormat;
                  tex.needsUpdate        = true;
                  var material        = new THREE.MeshBasicMaterial({
                          map                : tex,
                          transparent        : transparent ? true : false
                  });
                  return material;
          }
          function uvmap (geometry, face, x, y, w, h, rotateBy) {
                  if(!rotateBy) rotateBy = 0;
                  var uvs = geometry.faceVertexUvs[0][face];
                  var tileU = x;
                  var tileV = y;
                  
                  uvs[ (0 + rotateBy) % 4 ].u = tileU * tileUvW;
                  uvs[ (0 + rotateBy) % 4 ].v = tileV * tileUvH;
                  uvs[ (1 + rotateBy) % 4 ].u = tileU * tileUvW;
                  uvs[ (1 + rotateBy) % 4 ].v = tileV * tileUvH        + h * tileUvH;
                  uvs[ (2 + rotateBy) % 4 ].u = tileU * tileUvW        + w * tileUvW;
                  uvs[ (2 + rotateBy) % 4 ].v = tileV * tileUvH        + h * tileUvH;
                  uvs[ (3 + rotateBy) % 4 ].u = tileU * tileUvW        + w * tileUvW;
                  uvs[ (3 + rotateBy) % 4 ].v = tileV * tileUvH;
          };
  
          var canvas        = document.createElement('canvas');
          canvas.width        = 64;
          canvas.height        = 32;
          var context        = canvas.getContext('2d');
          var material        = getMaterial(canvas, false);
          var materialTrans        = getMaterial(canvas, true);
  
          // Player model
  
          var playerModel        = tQuery.createObject3D().addTo(world);
          playerModel.rotateY(-Math.PI/2)
          
          
          var tileUvW        = 1/canvas.width;
          var tileUvH        = 1/canvas.height;
          
          var headgroup        = new THREE.Object3D();
          var upperBody        = new THREE.Object3D();
  
          // Left leg
          var leftleggeo = new THREE.CubeGeometry(4, 12, 4);
          for(var i=0; i < 8; i+=1) {
                  leftleggeo.vertices[i].y -= 6;
          }
          var leftleg = new THREE.Mesh(leftleggeo, material);
          leftleg.position.z = -2;
          leftleg.position.y = -6;
          uvmap(leftleggeo, 0,  8, 20, -4, 12);
          uvmap(leftleggeo, 1, 16, 20, -4, 12);
          uvmap(leftleggeo, 2,  4, 16,  4,  4, 3);
          uvmap(leftleggeo, 3,  8, 20,  4, -4, 1);
          uvmap(leftleggeo, 4, 12, 20, -4, 12);
          uvmap(leftleggeo, 5,  4, 20, -4, 12);
          playerModel.add(leftleg)
  
          
          // Right leg
          var rightleggeo = new THREE.CubeGeometry(4, 12, 4);
          for(var i=0; i < 8; i+=1) {
                  rightleggeo.vertices[i].y -= 6;
          }
          var rightleg = new THREE.Mesh(rightleggeo, material);
          rightleg.position.z = 2;
          rightleg.position.y = -6;
          uvmap(rightleggeo, 0,  4, 20,  4, 12);
          uvmap(rightleggeo, 1, 12, 20,  4, 12);
          uvmap(rightleggeo, 2,  8, 16, -4,  4, 3);
          uvmap(rightleggeo, 3, 12, 20, -4, -4, 1);
          uvmap(rightleggeo, 4,  0, 20,  4, 12);
          uvmap(rightleggeo, 5,  8, 20,  4, 12);
          playerModel.add(rightleg)
  
          var upperBody        = tQuery.createObject3D();
          playerModel.add(upperBody)
  
          // Body
          var bodygeo        = new THREE.CubeGeometry(4, 12, 8);
          var bodymesh        = new THREE.Mesh(bodygeo, material);
          uvmap(bodygeo, 0, 20, 20, 8, 12);
          uvmap(bodygeo, 1, 32, 20, 8, 12);
          uvmap(bodygeo, 2, 20, 16, 8, 4, 1);
          uvmap(bodygeo, 3, 28, 16, 8, 4, 3);
          uvmap(bodygeo, 4, 16, 20, 4, 12);
          uvmap(bodygeo, 5, 28, 20, 4, 12);
          upperBody.add(bodymesh);
          
          
          // Left arm
          var leftarmgeo = new THREE.CubeGeometry(4, 12, 4);
          for(var i=0; i < 8; i+=1) {
                  leftarmgeo.vertices[i].y -= 4;
          }
          var leftarm = new THREE.Mesh(leftarmgeo, material);
          leftarm.position.z = -6;
          leftarm.position.y = 4;
          leftarm.rotation.x = Math.PI/32;
          uvmap(leftarmgeo, 0, 48, 20, -4, 12);
          uvmap(leftarmgeo, 1, 56, 20, -4, 12);
          uvmap(leftarmgeo, 2, 48, 16, -4, 4, 1);
          uvmap(leftarmgeo, 3, 52, 16, -4, 4, 3);
          uvmap(leftarmgeo, 4, 52, 20, -4, 12);
          uvmap(leftarmgeo, 5, 44, 20, -4, 12);
          upperBody.add(leftarm);
          
          // Right arm
          var rightarmgeo = new THREE.CubeGeometry(4, 12, 4);
          for(var i=0; i < 8; i+=1) {
                  rightarmgeo.vertices[i].y -= 4;
          }
          var rightarm = new THREE.Mesh(rightarmgeo, material);
          rightarm.position.z = 6;
          rightarm.position.y = 4;
          rightarm.rotation.x = -Math.PI/32;
          uvmap(rightarmgeo, 0, 44, 20, 4, 12);
          uvmap(rightarmgeo, 1, 52, 20, 4, 12);
          uvmap(rightarmgeo, 2, 44, 16, 4, 4, 1);
          uvmap(rightarmgeo, 3, 48, 16, 4, 4, 3);
          uvmap(rightarmgeo, 4, 40, 20, 4, 12);
          uvmap(rightarmgeo, 5, 48, 20, 4, 12);
          upperBody.add(rightarm);
  
          var headgroup        = tQuery.createObject3D();
          upperBody.add(headgroup)
          headgroup.get(0).position.y = 8;
  
          //Head
          var headgeo        = new THREE.CubeGeometry(8, 8, 8);
          var headmesh        = new THREE.Mesh(headgeo, material);
          headmesh.position.y = 2;
          uvmap(headgeo, 0, 8, 8, 8, 8);
          uvmap(headgeo, 1, 24, 8, 8, 8);        
          uvmap(headgeo, 2, 8, 0, 8, 8, 1);
          uvmap(headgeo, 3, 16, 0, 8, 8, 3);
          uvmap(headgeo, 4, 0, 8, 8, 8);
          uvmap(headgeo, 5, 16, 8, 8, 8);
          headgroup.add(headmesh);
  
          
          var helmet        = cubeFromPlanes(9, materialTrans);
          helmet.position.y = 2;
          uvmap(helmet.children[0].geometry, 0, 32+8, 8, 8, 8);
          uvmap(helmet.children[1].geometry, 0, 32+24, 8, 8, 8);
          uvmap(helmet.children[2].geometry, 0, 32+8, 0, 8, 8, 1);
          uvmap(helmet.children[3].geometry, 0, 32+16, 0, 8, 8, 3);
          uvmap(helmet.children[4].geometry, 0, 32+0, 8, 8, 8);
          uvmap(helmet.children[5].geometry, 0, 32+16, 8, 8, 8);
          headgroup.add(helmet);
          
          var ears        = new THREE.Object3D();
          var eargeo        = new THREE.CubeGeometry(1, (9/8)*6, (9/8)*6);
          var leftear        = new THREE.Mesh(eargeo, material);
          var rightear        = new THREE.Mesh(eargeo, material);
          leftear.position.y        = 2+(9/8)*5;
          rightear.position.y        = 2+(9/8)*5;
          leftear.position.z        = -(9/8)*5;
          rightear.position.z        =  (9/8)*5;
          uvmap(eargeo, 0, 25, 1, 6, 6);                // Front side
          uvmap(eargeo, 1, 32, 1, 6, 6);                // Back side
          uvmap(eargeo, 2, 25, 0, 6, 1, 1);        // Top edge
          uvmap(eargeo, 3, 31, 0, 6, 1, 1);        // Bottom edge        
          uvmap(eargeo, 4, 24, 1, 1, 6);                // Left edge
          uvmap(eargeo, 5, 31, 1, 1, 6);                // Right edge
          ears.add(leftear);
          ears.add(rightear);
          leftear.visible = rightear.visible = false;
          headgroup.add(ears);
  
  

/////////////////////////////////////////////////////////////////

// //

/////////////////////////////////////////////////////////////////

var skinImage = new Image(); skinImage.onload = function () { context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(skinImage, 0, 0); material.map.needsUpdate = true; materialTrans.map.needsUpdate = true; }; skinImage.src = "char.png"; </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.