JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="https://raw.github.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://raw.github.com/collinhover/threeoctree/master/ThreeOctree.min.js"></script>

JavaScript

var camera, scene, renderer, octree, geometry, material, mesh, meshes = [],
    meshesSearch = [],
    meshCountMax = 1000,
    radius = 500,
    radiusMax = radius * 10,
    radiusMaxHalf = radiusMax * 0.5,
    radiusSearch = 400,
    searchMesh, baseR = 255,
    baseG = 0,
    baseB = 255,
    foundR = 0,
    foundG = 255,
    foundB = 0,
    adding = true;

init();
animate();

function init() {

    // standard three scene, camera, renderer
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.x = 5000;
    camera.position.y = 5000;
    camera.position.z = 5000;
    camera.lookAt(scene.position);
    scene.add(camera);

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

    document.body.appendChild(renderer.domElement);

    // create octree
    octree = new THREE.Octree({
        radius: radius,
        // optional, default = 1, octree will grow and shrink as needed
        depthMax: -1,
        // optional, default = -1, infinite depth
        objectsThreshold: 8,
        // optional, default = 8
        overlapPct: 0.15,
        // optional, default = 0.15 (15%), this helps sort objects that overlap nodes
        scene: scene // optional, pass scene as parameter only if you wish to visualize octree
    });

    // create object to show search radius and add to scene
    searchMesh = new THREE.Mesh(new THREE.SphereGeometry(radiusSearch), new THREE.MeshBasicMaterial({
        color: 0x00FF00,
        transparent: true,
        opacity: 0.4
    }));
    scene.add(searchMesh);

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame(animate);

    // modify octree structure by adding/removing objects
    modify_octree();

    // search octree at random location
    search_octree();

    // render results
    render();

}

function modify_octree() {

    // if is...