JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<canvas id="main_canvas" width="600" height="600">

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background: #112233;
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-items: center;
}
#ui {
  margin-bottom: 5px;
}

.noselect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#ctrl_over {
  position: absolute;
  opacity: 0.5;
  bottom: 13px;
  right: 5px;

  color: #aaa;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

#ctrl_sw {
  border: solid 1px #aaa;
  padding: 3px;
  margin-left: 10px;
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
}

#canv_wrap {
  position:relative;
  margin: 0px;
  padding: 0px;
  display: inline-block;
}

JavaScript

import * as THREE from 'https://unpkg.com/three/build/three.module.js'

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

const get = id => document.getElementById(id);

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

const [near, far] = [1, 100];
const mid = -0.5 * (near + far);
const camera = new THREE.PerspectiveCamera(45, w / h, near, far);
camera.position.set(20, 25, 20);
camera.lookAt(0, 4, 0);

const scene = new THREE.Scene();

const axhlp = new THREE.AxesHelper(10);
scene.add(axhlp);

const dir = new THREE.DirectionalLight(0xffffff, 1);
dir.position.set(1, 0.5, 0.7);

const canv2D = labelText => {

  const canvas = document.createElement('canvas');
  canvas.width = 256;
  canvas.height = 256;
  const ctx = canvas.getContext("2d");

  //ctx.fillStyle = "blue";
  //ctx.fillRect(0, 0, 256, 256);
  ctx.textAlign = "center";
  //ctx.strokeStyle = "black";
  ctx.lineWidth = 8;

  //ctx.strokeText(labelText, 0, 0);
  ctx.fillStyle = "white";
  //ctx.fillText(labelText, 0, 0);
  ctx.font = '24px Courier New';
  ctx.fillText(labelText, 128, 110);

  return canvas;
}


const createLabel = labelText => {

  const createCanvas = canv2D(labelText)
  const texture = new THREE.Texture(createCanvas);
  texture.needsUpdate = true;

  const spriteMat = new THREE.SpriteMaterial({
    map: texture
  });

  return new THREE.Sprite(spriteMat)
};

const geo = new THREE.BoxGeometry(1, 1, 1);
const [mat, mesh, rgb] = [
  [],
  [],
  [0xff0000, 0x00ff00, 0x0000ff]
];
for (let i = 0; i < 3; i++) {
  mat[i] = new THREE.MeshLambertMaterial({
    color: rgb[i]
  });
  // mesh[i] = new THREE.Mesh(geo, mat[i]);
  mesh[i] = createLabel('boom' + i);
  mesh[i].scale.set(10, 10, 1)
  scene.add(mesh[i]);
}

scene.add(dir);

const material = new THREE.LineBasicMaterial();

const pnt = [
...