JSFiddle - React, Tailwind, and code Playground

by tolland

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(500, 500, 500);
camera.lookAt(new THREE.Vector3(0, 0, 0));

var controls = new THREE.OrbitControls(camera);
controls.enableRotate = false;

var geometry = new THREE.PlaneGeometry(500, 500, 32);
var material = new THREE.MeshBasicMaterial({
  color: 0xEEEEEE,
  side: THREE.DoubleSide
});


var planeGroup = new THREE.Object3D();
scene.add(planeGroup);
planeGroup.name = 'PlaneGroup';

var plane = new THREE.Mesh(geometry, material);

plane.name = 'selectionPlane';
var lineGeoY = new THREE.Geometry();
lineGeoY.vertices.push(
  new THREE.Vector3(0, -5000, 0), new THREE.Vector3(0, 5000, 0)
);

plane.rotation.x = -0.5 * Math.PI;
planeGroup.add(plane);

var lineY = new THREE.Line(lineGeoY, new THREE.LineBasicMaterial({
  color: 0x00FF00,
  linewidth: 1
}));
lineY.type = THREE.Lines;


lineY.name = 'Y axis';
planeGroup.add(lineY);

var selectablesGroup = new THREE.Object3D();

for (let i = -1; i <= 1; i++) {
  for (let j = -1; j <= 1; j++) {
    var geometry = new THREE.CylinderGeometry(5, 5, 20, 32);
    var material = new THREE.MeshBasicMaterial({
      color: 0xffff00
    });
    var cylinder = new THREE.Mesh(geometry, material);
    cylinder.position.x = i * 100;
    cylinder.position.z = j * 100;
    selectablesGroup.add(cylinder);

  }
}

scene.add(selectablesGroup);
var mouse = new THREE.Vector2();

var that = this;
var mouseDragOn = false;
var mouseDragStart = new THREE.Vector3();
var mouseDragEnd = new THREE.Vector3();
var raycaster = new THREE.Raycaster();

var mouseMoveBox;

function onMouseMove(ev) {
  mouse.x = (ev.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(ev.clientY / window.innerHeight) * 2 + 1;



if(mouseDragOn){

 ...