<!doctype html>
<html>
<head>
<title>Barn translation, rotation, and scaling</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 translation, rotation, and scaling</h1>
<p></p>
</body>
</html>
var scene = new THREE.Scene();
var redbarn = TW.createBarnSolidColor(1,1,1,"red");
var greenbarn = TW.createBarnSolidColor(1,1,1,"green");
greenbarn.position.set(2,0,-1);
greenbarn.rotation.set(0,Math.PI/6,0); // pi/6 = 30 degrees rotation
greenbarn.scale.set(2,2,2);
scene.add(redbarn);
scene.add(greenbarn);
var renderer = new THREE.WebGLRenderer();
TW.mainInit(renderer,scene,{parentID: 'sceneTwoBarnsRotatedScaledDiv'});
TW.cameraSetup(renderer,
scene,
{minx: 0, maxx: 2,
miny: 0, maxy: 1,
minz: -1, maxz: 1});
TW.toggleAxes("show");
External CSS
This Pen doesn't use any external CSS resources.