JSFiddle - React, Tailwind, and code Playground

by yi hom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>

CSS

body {
  overflow: hidden
}

JavaScript

var clock = new THREE.Clock();
var scene, renderer, camera;
var controls;
var shoes = new THREE.Object3D();
var geometry;
var material;
var raycaster;
var raydis;
var intersects;
var pickables = [];
var shoes_mesh;


var shoes_goemetry;
var boundingBox;
var boundball,boundbballgeo,boundbballmat;


init();
animate();

function init()
{
	var width = window.innerWidth;
	var height = window.innerHeight;

	renderer = new THREE.WebGLRenderer({antialias: true});
	renderer.setSize (width, height);
	renderer.setClearColor (0x888888);
	document.body.appendChild (renderer.domElement);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera (45, width/height, 1, 10000);
	camera.position.y = 48;
	camera.position.z = 120;
	camera.lookAt (new THREE.Vector3(0,0,0));

	controls = new THREE.OrbitControls (camera, renderer.domElement);

	var gridXZ = new THREE.GridHelper(100, 10);
	gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
	scene.add(gridXZ);

	var pointLight = new THREE.PointLight (0xffffff);
	pointLight.position.set (0,300,200);
	scene.add (pointLight);

	var ambientLight = new THREE.AmbientLight (0x111111);
	scene.add(ambientLight);

////////////////////////////////////////////////////////////////////
	// load the clara.io toytrain
   THREE.ImageUtils.crossOrigin = '';  // no space between a pair of single quotes

	var loader = new THREE.ObjectLoader();
	loader.load("https://raw.githubusercontent.com/yihom/cg_hw/gh-pages/shoes.json",function ( obj , material) {
		obj.traverse( function ( child ) {
			shoes = obj;
			if ( child.geometry !== undefined ) {

				shoes_goemetry = child.geometry;
				//console.log( shoes_goemetry.vertices );
				shoes_goemetry.computeBoundingSphere();
				boundingBox = shoes_goemetry.boundingSphere.clone();
				console.log(boundingBox.radius);
			}

		});
		obj.scale.set (1,1,1);
		scene.add( shoes );
	});
	//console.log(boundingBox.radius);
}
var time = 0;
function animate()
{
	controls.update();

	/*
	if...