JSFiddle - React, Tailwind, and code Playground

by enbette

HTML

<script src="https://threejs.org/build/three.min.js"></script>

CSS

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

JavaScript

import * as THREE from "https://threejs.org/build/three.min.js"
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var loader = new THREE.TextureLoader();

var data = [{
    vx: 10,
    vy: 10
  }
]

var drawCircles = function() {
  this._positions = new Float32Array(3)
  this._colors = new Float32Array(3)
  this._textures = new Float32Array(1)
  this._bordercolors = new Float32Array(3)

  const color = new THREE.Color('#ff0000')
  const borderColor = new THREE.Color('#00ff00')

  data.map(({
    vx,
    vy
  }, i) => {
    const vertex = new THREE.Vector3(vx, vy, 0)
    vertex.toArray(this._positions, i * 3)
    color.toArray(this._colors, i * 3)
    this._textures[i] = 0
  })

  const geometry = new THREE.BufferGeometry()

  geometry.setAttribute('position', new THREE.BufferAttribute(this._positions, 3))
  geometry.setAttribute('color', new THREE.BufferAttribute(this._colors, 3))
  geometry.setAttribute('bordercolor', new THREE.BufferAttribute(this._bordercolors, 3))
  geometry.setAttribute('textureIndex', new THREE.BufferAttribute(this._textures, 1))
  
  const material = new THREE.ShaderMaterial({
    uniforms: {
      textures: {
        type: 'tv',
        value: [loader.load('https://i.postimg.cc/Hs7rQ499/seat-spinner.png')]
      },
      vSize: {
        value: 500.0
      }
    },
    extensions: {
      derivatives: true
    },
    vertexShader: `
      	attribute float textureIndex;
      	attribute vec3 color;
        attribute vec3 bordercolor;

      	uniform float vSize;

     	 	varying vec3 vColor;
        varying vec3 vBordercolor;
      	varying float vTextureIndex;

      	precision mediump float;

     ...