3D графики в Java Script

let camera, 
    scene, 
    renderer, 
    octree, 
    geometry = new THREE.BoxBufferGeometry( 50, 50, 50 ), 
    mesh, 
    meshes = [], 
    meshesSearch = [], 
    meshCountMax = 100, 
    radius = 500, 
    radiusMax = radius * 10, 
    radiusMaxHalf = radiusMax * 0.5, 
    radiusSearch = 400, 
    searchMesh, 
    base = new THREE.Color( 0xff00ff ), 
    found = new THREE.Color( 0x00ff00 ), 
    adding = true, 
    rayCaster = new THREE.Raycaster(), 
    origin = new THREE.Vector3(), 
    direction = new THREE.Vector3(); 
    init(); 
    animate(); 
    function init() { 
      scene = new THREE.Scene(); 
      scene.background = new THREE.Color("black"); 
      camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, radius * 100 ); 
      scene.add( camera ); 
      renderer = new THREE.WebGLRenderer(); 
      renderer.setPixelRatio( window.devicePixelRatio ); 
      renderer.setSize( window.innerWidth, window.innerHeight ); 
      document.body.appendChild( renderer.domElement ); 
      octree = new THREE.Octree( { 
      undeferred: false, 
      depthMax: Infinity, 
      objectsThreshold: 8, 
      overlapPct: 0.15, 
      scene: scene 
    } ); 
    searchMesh = new THREE.Mesh( 
      new THREE.SphereBufferGeometry( radiusSearch ), 
      new THREE.MeshBasicMaterial( { color: 0x00FF00, transparent: true, opacity: 0.4 } ) 
    ); 
    scene.add( searchMesh ); 
  } 
  function animate() { 
    requestAnimationFrame( animate ); 
    modifyOctree(); 
    searchOctree(); 
    render(); 
    octree.update(); 
  } 
function modifyOctree() { 
  if ( adding === true ) { 
    mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: new THREE.Color( base ) } ) ); 
    mesh.position.set( 
      Math.random() * radiusMax - radiusMaxHalf, 
      Math.random() * radiusMax - radiusMaxHalf, 
      Math.random() * radiusMax - radiusMaxHalf 
    ); 
    octree.add( mesh ); 
    scene.add( mesh ); 
    meshes.push( mesh ); 
    if ( meshes.length === meshCountMax ) { 
      adding = false; 
    } 
  } else {  
    mesh = meshes.shift(); 
    scene.remove( mesh ); 
    octree.remove( mesh ); 
    if ( meshes.length === 0 ) { 
      adding = true; 
    } 
  } 
 
} 
function searchOctree() { 
  let i, il; 
  for ( i = 0, il = meshesSearch.length; i < il; i ++ ) { 
    meshesSearch[ i ].object.material.color.copy( base ); 
  } 
  searchMesh.position.set( 
    Math.random() * radiusMax - radiusMaxHalf, 
    Math.random() * radiusMax - radiusMaxHalf, 
    Math.random() * radiusMax - radiusMaxHalf 
  ); 
  origin.copy( searchMesh.position ); 
  direction.set( Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1 ).normalize(); 
  rayCaster.set( origin, direction ); 
  meshesSearch = octree.search( rayCaster.ray.origin, radiusSearch, true, rayCaster.ray.direction ); 
  rayCaster.intersectOctreeObjects( meshesSearch ); 
  for ( i = 0, il = meshesSearch.length; i < il; i ++ ) { 
    meshesSearch[ i ].object.material.color.copy( found ); 
  } 
} 
function render() { 
  let timer = - Date.now() / 5000; 
  camera.position.x = Math.cos( timer ) * 10000; 
  camera.position.z = Math.sin( timer ) * 10000; 
  camera.lookAt( scene.position ); 
  renderer.render( scene, camera ); 
}

body { 
    font-family: Monospace; 
    background-color: #f0f0f0; 
    margin: 0px; 
    overflow: hidden; 
  }

<script type="text/javascript" src="https://threejs.org/build/three.js"></script> 
<script type="text/javascript" src="https://threejs.org/examples/js/Octree.js"></script>