Three.js - octree - webgl interactive points

by realhunts

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/collinhover/threeoctree/master/threeoctree.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/Detector.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/Projector.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">

  attribute float size; attribute vec3 customColor; varying vec3 vColor; void main() { vColor = customColor; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_PointSize = size * ( 300.0 / -mvPosition.z ); gl_Position = projectionMatrix * mvPosition;
  }

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

  uniform vec3 color; uniform sampler2D texture; varying vec3 vColor; void main() { gl_FragColor = vec4( color * vColor, 1.0 ); gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord ); if ( gl_FragColor.a
  < ALPHATEST ) discard; } </script>

    <body>

      <body>
        <div id="container"></div>
        <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - octree - webgl interactive points</div>
      </body>

CSS

body {
  color: #ffffff;
  font-family: Monospace;
  font-size: 13px;
  text-align: center;
  font-weight: bold;
  background-color: #000000;
  margin: 0px;
  overflow: hidden;
}

#info {
  color: #fff;
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 5px;
  z-index: 100;
}

JavaScript

//if (!Detector.webgl) Detector.addGetWebGLMessage();

var renderer, scene, camera, stats;

var particles, uniforms;

var PARTICLE_SIZE = 20;
var octree;
var raycaster, intersects;
var mouse, INTERSECTED;

init();
animate();

function init() {

  container = document.getElementById('container');

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 250;

  //

  var geometry1 = new THREE.BoxGeometry(200, 200, 200, 16, 16, 16);
  var vertices = geometry1.vertices;

  var positions = new Float32Array(vertices.length * 3);
  var colors = new Float32Array(vertices.length * 3);
  var sizes = new Float32Array(vertices.length);

  var vertex;
  var color = new THREE.Color();

  for (var i = 0, l = vertices.length; i < l; i++) {

    vertex = vertices[i];
    vertex.toArray(positions, i * 3);

    color.setHSL(0.01 + 0.1 * (i / l), 1.0, 0.5)
    color.toArray(colors, i * 3);

    sizes[i] = PARTICLE_SIZE * 0.5;

  }

  var geometry = new THREE.BufferGeometry();
  geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
  geometry.addAttribute('customColor', new THREE.BufferAttribute(colors, 3));
  geometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));

  //

  var material = new THREE.ShaderMaterial({

    uniforms: {
      color: {
        value: new THREE.Color(0xffffff)
      },
      texture: {
        value: new THREE.TextureLoader().load("https://rawgit.com/mrdoob/three.js/master/examples/textures/sprites/disc.png")
      }
    },
    vertexShader: document.getElementById('vertexshader').textContent,
    fragmentShader: document.getElementById('fragmentshader').textContent,

    alphaTest: 0.9,

  });

  //

  particles = new THREE.Points(geometry, material);
  scene.add(particles);

  // 

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