<!doctype html>
<html>
  <head>
    <title>Barn 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>Barn instance transforms</h1>
  
  <p>Apply translation, rotation, and scaling to the barn</p>

</body>
</html>
    var barnValues = {
        barnX: 0,
        barnY: 0,
        barnZ: 0,
        barnRotationX: 0,
        barnRotationY: 0,
        barnRotationZ: 0,
        barnScaleX: 1,
        barnScaleY: 1,
        barnScaleZ: 1 };

var scene = new THREE.Scene();

// ====================================================================

var barnWidth = 50;
var barnHeight = 30;
var barnDepth = 40;

var barn1geom = TW.createBarn( barnWidth, barnHeight, barnDepth );
var barn1mesh = TW.createMesh(barn1geom);

// Proceed as usual

scene.add(barn1mesh);

// ================================================================
// 
// We always need a renderer

var renderer = new THREE.WebGLRenderer();

TW.mainInit(renderer,scene);
TW.cameraSetup(renderer, scene, {minx: 0, maxx: barnWidth,
                                 miny: 0, maxy: barnHeight+0.5*barnWidth,
                                 minz: -barnDepth, maxz: 0});
TW.toggleAxes("show");


function updateGraphics() {
    // the position is an absolute thing
    barn1mesh.position.set( barnValues.barnX,
                            barnValues.barnY,
                            barnValues.barnZ );
    // the rotation is an absolute thing
    barn1mesh.rotation.set( barnValues.barnRotationX,
                            barnValues.barnRotationY,
                            barnValues.barnRotationZ,
                            'XYZ');
    // the scaling is an absolute thing
    barn1mesh.scale.set( barnValues.barnScaleX,
                         barnValues.barnScaleY,
                         barnValues.barnScaleZ);
}

function redraw() {
    updateGraphics();
    TW.render();
}

var gui = new dat.GUI();
gui.add(barnValues,'barnX',-100,100).onChange(redraw);
gui.add(barnValues,'barnY',-100,100).onChange(redraw);
gui.add(barnValues,'barnZ',-100,100).onChange(redraw);
gui.add(barnValues,'barnRotationX',0,2*Math.PI).onChange(redraw);
gui.add(barnValues,'barnRotationY',0,2*Math.PI).onChange(redraw);
gui.add(barnValues,'barnRotationZ',0,2*Math.PI).onChange(redraw);
gui.add(barnValues,'barnScaleX',-2,2).onChange(redraw);
gui.add(barnValues,'barnScaleY',-2,2).onChange(redraw);
gui.add(barnValues,'barnScaleZ',-2,2).onChange(redraw);

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