JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mrdoob.github.com/three.js/build/Three.js"></script>
</head>
<body>
<div id="3d_scene"></div>
</body>
</html>
JavaScript
// jsHint
/*global window */
/*global THREE */
// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / 60);
};
})();
var App = {};
App = function(sceneContainerName) {
this.sceneContainerName = sceneContainerName;
this.SCREEN_WIDTH = window.innerWidth;
this.SCREEN_HEIGHT = window.innerHeight;
this.NUM_HORIZONTAL_LINES = 40;
this.controls = {};
this.init();
};
App.prototype = {
init: function() {
// init scene
this.scene = new THREE.Scene();
// init projector
this.projector = new THREE.Projector();
// init camera
// View Angle, Aspect, Near, Far
this.camera = new THREE.PerspectiveCamera(60, this.SCREEN_WIDTH / this.SCREEN_HEIGHT, 0.01, 10000);
// set camera position
this.camera.position.x = 0;
this.camera.position.y = 0;
this.camera.position.z = 15;
// add the camera to the scene
this.scene.add(this.camera);
// init renderer
this.renderer = new THREE.CanvasRenderer();
// start the renderer
this.renderer.setSize(this.SCREEN_WIDTH, this.SCREEN_HEIGHT);
this.initTrackballControl();
var me = this;
// attach the render-supplied DOM element
var container = document.getElementById(this.sceneContainerName);
container.appendChild(this.renderer.domElement);
this.animate();
// Position of this call matters
// The render is updating something
// to make all of the
// projector.unprojectVector calls work
this.drawGrid(this.NUM_HORIZONTAL_LINES);
},
initTrackballControl: function() {
...