JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script src="http://mrdoob.github.com/three.js/build/Three.js"></script>
<script src="./js/jquery-1.7.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<div id="container" style="width:700px;height:700px;border-width:1px;border-style:solid;display:inline-block;"></div>
<div id="blabber"></div>
</body>
</html>
JavaScript
var camera = new Array(),
scene = new Array(),
renderer = new Array(),
spotLight = new Array(),
controls = new Array();
var radius = 50,
segments = 16,
rings = 16,
WIDTH = 700,
HEIGHT = 700,
VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 1,
FAR = 10000;
function createBasics(index, domElement, w, h, aspect){
scene[index] = new THREE.Scene();
camera[index] = new THREE.PerspectiveCamera(VIEW_ANGLE, aspect, NEAR, FAR);
camera[index].position.z = 1000;
scene[index].add(camera[index]);
controls[index] = new THREE.TrackballControls(camera[index], $(domElement)[0]);
controls[index].rotatespeed = 50.0;
controls[index].zoomSpeed = 5.0;
controls[index].panSpeed = 0.8;
controls[index].noZoom = false;
controls[index].noPan = false;
controls[index].staticMoving = false;
controls[index].dynamicDampingFactor = 0.3;
controls[index].keys = [65, 83, 68];
spotLight[index] = new THREE.SpotLight(0xFFFFFF,1.5);
renderer[index] = new THREE.WebGLRenderer({ antialias: true });
renderer[index].setSize( w, h );
$(domElement).html(renderer[index].domElement );
}
function decenterCylinderBoundingBox(obj){
obj.computeBoundingBox();
var boundingbox = obj.boundingBox;
var centerx = (boundingbox.max.x - boundingbox.min.x)/2;
var centery = (boundingbox.max.y - boundingbox.min.y)/2;
var centerz = (boundingbox.max.z - boundingbox.min.z)/2;
boundingbox.max.x -= centerx; boundingbox.min.x -= centerx;
boundingbox.max.y -= centery; boundingbox.min.y -= centery;
boundingbox.max.z -= centerz; boundingbox.min.z -= centerz;
...