JSFiddle - React, Tailwind, and code Playground

by alexvestin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>

JavaScript

let vertexShader = `
    precision mediump float;
    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    uniform vec3 cameraPosition;
    attribute vec3 position;    // blueprint's vertex positions
    attribute vec3 color;       // only used for raycasting
    attribute vec3 translation; // x y translation offsets for an instance
    varying vec3 vColor;
    void main() {
      vColor = color;
      // set point position
      vec3 pos = position + translation;
      vec4 projected = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
      gl_Position = projected;
      // use the delta between the point position and camera position to size point
      float xDelta = pow(projected[0] - cameraPosition[0], 2.0);
      float yDelta = pow(projected[1] - cameraPosition[1], 2.0);
      float zDelta = pow(projected[2] - cameraPosition[2], 2.0);
      float delta  = pow(xDelta + yDelta + zDelta, 0.5);
      gl_PointSize = 10000.0 / delta;
    }
`    
let fragmentShader = `
/**
    * The fragment shader's main() function must define 
    * which describes the pixel color of each pixel on the screen.
    *
    * To do so, we can use uniforms passed into the shader and varyings
    * passed from the vertex shader.
    *
    * Attempting to read a varying not generated by the vertex shader will
    * throw a warning but won't prevent shader compiling.
    **/
    precision highp float;
    varying vec3 color;
    uniform float useColor;
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

/**
  * Generate a scene object with a background color
  **/
  function getScene() {
    var scene = new THREE.Scene();
    scene.background = new THREE.Color(0xaaaaaa);
    return scene;
  }
  /**
  * Generate the camera to be used in the scene. Camera args:
  *   [0] field of view: identifies the portion of the scene
  *     visible at any time (in degrees)
  *   [1] aspect ratio: identifies the aspect ratio of the
  *     scene in width/height
 ...