JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
JavaScript
var speed = 100;
var velocity = { x: 100, y: 0 };
var radian = 0;
var state = 0;
// touch
document.body.addEventListener('mousedown', function(e){
state = 1;
}, false);
document.body.addEventListener('mouseup', function(e){
state = 2;
}, false);
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x666666 );
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set( 0, 0, 30 );
camera.lookAt( 0, 0, 0 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// grid
var gridHelper = new THREE.GridHelper( 100, 20 );
gridHelper.rotation.x = Math.PI/2;
scene.add( gridHelper );
var bShape = new THREE.Shape();
bShape.moveTo( 6, 6 );
bShape.lineTo( 6, 8 );
bShape.lineTo( 8, 8 );
bShape.lineTo( 8, 6 );
bShape.lineTo( 6, 6 );
var bGeometry = new THREE.ShapeGeometry( bShape );
var shapeB = new THREE.Mesh( bGeometry, new THREE.MeshBasicMaterial( { color: 0x999999, side: THREE.DoubleSide, transparent: true, opacity: 0.2 } ) );
var cShape = new THREE.Shape();
cShape.moveTo( 0, 0 );
cShape.absarc( 0, 8, 3, 0, Math.PI * 2, false );
var cGeometry = new THREE.ShapeGeometry( cShape );
var shapeC = new THREE.Mesh( cGeometry, new THREE.MeshBasicMaterial( { visible: true , color: 0x789654 } ) );
var circleRadius = 8;
var circleShape = new THREE.Shape();
circleShape.moveTo( 0, 0 );
circleShape.absarc( 0, 0, circleRadius, 0, Math.PI * 2, false );
var circleGeometry = new THREE.ShapeGeometry( circleShape );
var plane = new THREE.Mesh( circleGeometry, new THREE.MeshBasicMaterial( { visible: true , color: 0x456789 } ) );
scene.add( plane );
shapeC.updateMatrix();
plane.geometry.merge(shapeC.geometry, shapeC.matrix);
shapeB.updateMatrix();
plane.geometry.merge(shapeB.geometry, shapeB.matrix);
var boxGeometry = new...