JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
CSS
body {
margin: 0;
overflow: hidden;
}
JavaScript
// global variables
var renderer;
var scene;
var camera;
var control;
init();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
// create a scene, that will hold all our elements such as objects, cameras and lights.
scene = new THREE.Scene();
// create a camera, which defines where we're looking at.
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
// create a render, sets the background color and the size
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
// create a cube and add to scene
createScene();
// create light
var light = new THREE.DirectionalLight();
light.position.set(20, 30, 20);
scene.add(light);
// position and point the camera to the center of the scene
camera.position.x = 15;
camera.position.y = 16;
camera.position.z = 13;
camera.lookAt(scene.position);
// add the output of the renderer to the html element
document.body.appendChild(renderer.domElement);
control = new function () {
// this.angleToApply = Math.PI/2;
this.rotationSpeedRedY = 0.01;
this.rotationSpeedGreenZ = 0.01;
};
addControls(control);
// call the render function
render();
}
// var rotationSpeedX;
var _cubeRed;
var _cubeGreen;
function createScene(){
var cubeGeometry = new THREE.BoxGeometry(2, 3, 4);
var cubeMaterial = new THREE.MeshLambertMaterial();
cubeMaterial.color = new THREE.Color('red');
_cubeRed = new THREE.Mesh(cubeGeometry, cubeMaterial);
_cubeRed.name = 'cubeRed';
// _cubeRed.rotation.x = Math.PI/3;
...