<!doctype html>
<html>
  <head>
    <title>Blocks (instance transforms)</title>
    <style>
      body { max-width: 100%; }
      /* feel free to style the canvas any way you want. If you want it to
      use the entire window, set width: 100% and height: 100%. */
      
      canvas {
          width: 80%;
          height: 500px;
          display: block;
          margin: 10px auto;
      }
    </style>
  </head>
<body>

  <h1>Blocks (instance transforms)</h1>
  
  <p></p>

</body>
</html>
var scene = new THREE.Scene();

var box1 = TW.wireCube("white");
scene.add(box1);

var box2 = TW.wireCube("red");
box2.position.set(2,3,4);
scene.add(box2);

var box3 = TW.wireCube("purple");
box3.position.set(4,0,5);
box3.scale.set(2,2,2);
scene.add(box3);

// compensating in the translation
var box4 = TW.wireCube("blue");
box4.position.set(8,1,1);
box4.scale.set(2,2,2);
scene.add(box4);

// stacking some rotated blocks
var box5 = TW.wireCube("yellow");
box5.position.set(1,1,8);
box5.scale.set(2,2,2);
scene.add(box5);

var box6 = TW.wireCube("orange");
box6.position.set(1,3,8); // 2 units higher than box5
box6.rotation.set(0, TW.degrees2radians(30), 0);  // degrees around Y
box6.scale.set(2,2,2);
scene.add(box6);

var box7 = TW.wireCube("brown");
box7.position.set(1,5,8); // 2 more units higher
box7.rotation.set(0, TW.degrees2radians(60), 0);
box7.scale.set(2,2,2);
scene.add(box7);

// non-uniform scaling
var box8 = TW.wireCube("cyan");
box8.position.set(8,0,8);
box8.rotation.set(0, TW.degrees2radians(45), 0);
box8.scale.set(1,5,1);
scene.add(box8);

var renderer = new THREE.WebGLRenderer();
TW.mainInit(renderer,scene,{parentID: 'sceneManyBlocksDiv'});
TW.cameraSetup(renderer,
               scene,
               {minx: 0, maxx: 10,
                miny: 0, maxy: 5,
                minz: 0, maxz: 10});
TW.toggleGroundPlane("show");

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/three.min.js
  2. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/OrbitControls.js
  3. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/tw.js
  4. https://s3.amazonaws.com/m.mr-pc.org/t/cisc3620/2020sp/dat.gui.min.js