JSFiddle - React, Tailwind, and code Playground

by mnk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<div id="stage"></div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow:hidden;
}
#stage {
  width: 100%;
  height: 100%;
  
}

JavaScript

const FRUSTUM_SIZE = 1000;
const ZOOM_RATIO = 0.08;
const POINT_SIZE = 16;
const THREE = window.THREE;
const STAGE = document.getElementById('stage');

let renderer = new THREE.WebGLRenderer({
	antialias: true,
	alpha: true
});
renderer.setClearColor(0xFFFFFF, 1);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(STAGE.clientWidth, STAGE.clientHeight);
STAGE.appendChild(renderer.domElement);

let scene = new THREE.Scene();
let camera = createCamera();

// Basic Circle
let geometry = new THREE.CircleGeometry(POINT_SIZE, 16);
let material = new THREE.MeshBasicMaterial({
  color: 0x707070,
});
let mesh = new THREE.Mesh(geometry, material);
mesh.position.set(-100,0,0);
scene.add(mesh);

// Points and BufferGeometry
let positions = new Float32Array(3);
positions[0] = 0;
positions[1] = 0;
positions[2] = -250;

let sizes = new Float32Array(1);
sizes[0] = POINT_SIZE;

let bufferGeometry = new THREE.BufferGeometry();
bufferGeometry.addAttribute('position', new THREE.BufferAttribute(positions, 3));
bufferGeometry.addAttribute('size', new THREE.BufferAttribute(sizes, 1));

const vertexShader = `
void main() {
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);

    gl_PointSize = size * (300.0 / mvPosition.z);
    gl_Position = projectionMatrix * mvPosition;
}
`;
const fragmentShader = `
void main() {
    gl_FragColor = vec4(1, 0, 0, 1);
}
`;
const texture = new THREE.ShaderMaterial({
  uniforms: {
    zoom: STAGE.clientHeight / (Math.tan(THREE.Math.DEG2RAD * 0.5) / camera.zoom),
    vertexShader,
    fragmentShader
  }
});
texture.needsUpdate = true;
let points = new THREE.Points(bufferGeometry, texture);
scene.add(points);

STAGE.addEventListener('wheel', function(e) {
	let x = e.clientX;
	let y = e.clientY;
  let isZoomIn = e.deltaY < 0;
  let direction = isZoomIn ? 1 : -1;
  let factor = (1 + direction * ZOOM_RATIO);
  
  camera.zoom *= factor;
  positions[2] *= factor;
  camera.updateProjectionMatrix();
}, true);

render();
function render()...