JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<link type="text/css" rel="stylesheet" href="https://alikim.com/_v1_jsm/css/controls.css">
<canvas id="main_canvas" width="750" height="500"></canvas>
<div id="ui">
  <button id="psw">...</button>
</div>

JavaScript

import * as THREE from 'https://alikim.com/_v1_jsm/three.module.js'

import * as CONTROLS from 'https://alikim.com/_v1_jsm/controls.js'

import { log, slog, get, getHTML } from 'https://alikim.com/_v1_jsm/utils.js'

import { makeSwitchBtn } from 'https://alikim.com/_v1_jsm/ui.js'

const html = getHTML();

// 3D

const canvas = get('main_canvas');
const [w, h] = [canvas.width, canvas.height];
const renderer = new THREE.WebGLRenderer({
  antialias: true,
  canvas: canvas,
});
renderer.setSize(w, h);

const [near, far] = [0.1, 100];
const camera = new THREE.PerspectiveCamera(50, w / h, near, far);
camera.position.set(2, 2, 2);
camera.lookAt(0, 0, 0);

const scene = new THREE.Scene();

const hlp = new THREE.AxesHelper(2);
scene.add(hlp);

const map = new THREE.TextureLoader().load(
  'https://alikim.com/_v1_jsm/textures/uv.png',
  render,
);
const material = new THREE.SpriteMaterial({ map });

const sprite = new THREE.Sprite(material);
scene.add(sprite);

const pgeo = new THREE.SphereGeometry(0.05);
const matg = new THREE.MeshBasicMaterial({color: 'green'});
const matr = new THREE.MeshBasicMaterial({color: 'red'});

const meshg = new THREE.Mesh(pgeo, matg);
const meshr = new THREE.Mesh(pgeo, matr);
const [posg, posr] = [[1, 1, 0.5], [-1, -2, -0.5]];
const rg = [Math.sqrt(posg[0] * posg[0] + posg[2] * posg[2])];
const rr = [Math.sqrt(posr[0] * posr[0] + posr[2] * posr[2])];
meshg.position.set(...posg);
meshr.position.set(...posr);
scene.add(meshg).add(meshr);

let fig = 0, fir = 0;
const rotatePoints = () => {
  meshg.position.x = rg * Math.cos(fig);
  meshg.position.z = rg * Math.sin(fig);
  fig += 0.02;
  meshr.position.x = rr * Math.cos(fir);
  meshr.position.z = rr * Math.sin(fir);
  fir -= 0.013;
};

const ratio = w / h;
const difW = new THREE.Vector3();
const adjustSprite = () => {
  // project points to ndc to measure angle
  const prg = meshg.position.clone().project(camera);
  const prr = meshr.position.clone().project(camera);
  const pdif =...