JSFiddle - React, Tailwind, and code Playground

by tolland

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container">

</div>

CSS

body {
    overflow: hidden;
    margin: 0;
  }

JavaScript

console.clear();

var container, renderer, scene, camera, controls;

init();
animate();

function init() {

container = document.getElementById('container');

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild( renderer.domElement );

var light = new THREE.DirectionalLight( 0xFFFFFF );
light.position.set( -1, 1, 1 );
light.lookAt( new THREE.Vector3( 0, 0, 0 ) );

camera = new THREE.PerspectiveCamera( 60, 1.6, 1, 1000 );
camera.position.set( 100, 100, 100 );
camera.lookAt( new THREE.Vector3( 0, 2, 0 ) );

controls = new THREE.OrbitControls(camera, renderer.domElement);
scene.add(camera, light );

var mat1 =  new THREE.MeshBasicMaterial({
    color: 'yellow',
    transparent: true,
    //wireframe: true,
    transparent: true, opacity: 0.2
  })

var mat2 =  new THREE.MeshBasicMaterial({
    color: 'lightblue',
    transparent: true,
    //wireframe: true,
    transparent: true, opacity: 0.2
  })

var mn = -5;
var mx = 5;
cubes = [];
for (let i = mn; i < mx; i++) {
for (let j = mn; j < mx; j++) {
for (let k = mn; k < mx; k++) {
    let cube = new THREE.Mesh(new THREE.CubeGeometry(2,2,2),new THREE.MeshBasicMaterial({
    color: 'yellow',    transparent: true,    transparent: true, opacity: 0.1
  }));
    cube.position.x = i*15;
    cube.position.y = j*15;
    cube.position.z = k*15;
    cubes.push(cube);
    scene.add(cube);
}}}

  let searchcube = new THREE.Mesh(new THREE.CubeGeometry(20,100,20), mat2);
    searchcube.position.x = 30;
    searchcube.position.y = 0;
    searchcube.position.z = 30;
    scene.add(searchcube);

   var bbox = new THREE.Box3().setFromObject(searchcube );
      var helper2 = new THREE.Box3Helper( bbox, 0x00ff00 );
    scene.add( helper2 );

for (let index = 0; index < cubes.length; index++) {
  const element = cubes[index];
  var tmp = element.position.clone();
  if(bbox.containsPoint(tmp)){
        console.log("found object "+element);
       ...