JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<div id="log" style="position:fixed; top: 0px; left:0px;"></div>
JavaScript
var container, stats;
var camera, scene, renderer, objects;
var pointLight;
var sphere;
var targetRotation = 0;
var targetRotationOnMouseDown = 0;
var mouseX = 0;
var mouseXOnMouseDown = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var moveForward = false;
var moveBackwards = false;
var moveLeft = false;
var moveRight = false;
var moveUp = false;
var moveDown = false;
var targetMoveLeft = false;
var targetMoveRight = false;
var debugContext;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 150, 400 );
camera.target = new THREE.Vector3( 0, 150, 0 );
scene = new THREE.Scene();
// Grid
var size = 500, step = 100;
var geometry = new THREE.Geometry();
for ( var i = - size; i <= size; i += step ) {
geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
geometry.vertices.push( new THREE.Vector3( size, 0, i ) );
geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
geometry.vertices.push( new THREE.Vector3( i, 0, size ) );
}
var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.5 } );
var line = new THREE.Line( geometry, material );
line.type = THREE.LinePieces;
scene.add( line );
// Spheres
objects = [];
geometry = new THREE.IcosahedronGeometry( 100, 1 );
material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'textures/metal.jpg', new THREE.SphericalReflectionMapping() ), overdraw: 0.5 } );
for ( var i = 0; i < 10; i ++ ) {
sphere = new THREE.Mesh( geometry, material );
sphere.position.x = Math.random() * 1000 - 500;
sphere.position.y = Math.random() * 1000 - 500;
sphere.position.z = Math.random() *...