JSFiddle - React, Tailwind, and code Playground

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/PLYLoader.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
  background-color: #000;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 5, -1000);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var light = new THREE.DirectionalLight(0xfffff, 0.5);
light.position.setScalar(-10, 10, -10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var pointsMaterial;

var loader = new THREE.PLYLoader();
loader.load('https://threejs.org/examples/models/ply/binary/Lucy100k.ply', function(geometry) {
  geometry.computeVertexNormals();
  var material = new THREE.MeshStandardMaterial({
    color: 0x0055ff,
    flatShading: true,
  });
  var mesh = new THREE.Mesh(geometry, material);
  mesh.castShadow = true;
  mesh.receiveShadow = true;
  scene.add(mesh);

  pointsMaterial = new THREE.ShaderMaterial({
    uniforms: {
      diffuse: {
        value: new THREE.Color("aqua")
      },
      size:{
      	value: 5
      },
      scale: {
      	value: window.innerHeight / 2.0
      },
      boxPosition: {
      	value: new THREE.Vector3(0, 0, 0)
      },
      boxSize: {
      	value: new THREE.Vector3(1000, 200, 350)
      }
    },
    vertexShader: `
			
      uniform float scale;
      uniform float size;
      
      varying vec3 vPosition;
      
      void main() {
      
        vPosition = position;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
        gl_Position = projectionMatrix * mvPosition;

      }
  `,
    fragmentShader: `
    
      uniform vec3 diffuse;
      
      uniform vec3 boxPosition;
      uniform vec3 boxSize;
      
      varying vec3 vPosition;

      void main() {
      	
        vec3 halfSize = boxSize * 0.5;
        vec3 absLocalPosition =...