JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://dat-gui.googlecode.com/git/build/dat.gui.min.js"></script>
CSS
body {
background-color: #222222;
margin: 0px;
overflow: hidden;
}
JavaScript
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container, camera, scene, renderer;
scene = new THREE.Scene();
//
renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
document.body.appendChild( renderer.domElement );
renderer.autoClear = false;
//
camera = new THREE.PerspectiveCamera( 50, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.set(1000,1000,1000);
camera.lookAt(scene.position);
//
//axes = new THREE.AxisHelper(500);
//scene.add(axes);
mesh = new THREE.Mesh( new THREE.SphereGeometry( 10, 16, 8 ), new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ) );
scene.add( mesh );
axes = new THREE.Mesh( new THREE.CylinderGeometry(0, 100, 400, 3, 1, false), new THREE.MeshBasicMaterial( { color: 0xffeeff, wireframe: true } ) );
scene.add( axes );
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
renderer.clear();
renderer.render( scene, camera );
}
var initGUI = function() {
// this setting makes the gui report figures to two decimal places
this.x = 0.1;
this.y = 0.1;
this.z = 0.1;
}
var myGui = new initGUI();
var gui = new dat.GUI();
xControl = gui.add(myGui, 'x', -1, 1).listen();
yControl = gui.add(myGui, 'y', -1, 1).listen();
zControl = gui.add(myGui, 'z', -1, 1).listen();
xControl.onChange(function(value) {
axes.up.set(value, this.object.y, this.object.z);
mesh.position.set(value*500, this.object.y*500, this.object.z*500);
axes.lookAt(new THREE.Vector3(0, 0, 1));
});
yControl.onChange(function(value) {
axes.up.set(this.object.x, value, this.object.z);
mesh.position.set(this.object.x*500, value*500, this.object.z*500);
axes.lookAt(new THREE.Vector3(0, 0, 1));
});
zControl.onChange(function(value) {
axes.up.set(this.object.x, this.object.y, value);
mesh.position.set(this.object.x*500, this.object.y*500, value*500);
...