JSFiddle - React, Tailwind, and code Playground

by tfoller

HTML

<div id="cont">
  <canvas id="canvas_def" width="300" height="300"></canvas>
  <canvas id="canvas_mod" width="300" height="300"></canvas>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background: #112233;
}

canvas {
  margin: 20px 0px 0px 20px;
  border: solid 1px grey; 
}

#cont {
  width: 644px;
}

#reload {
  margin: 20px;
}

JavaScript

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

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

const texldr = new THREE_DEF.TextureLoader();

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

const render_scene = (THREE, canvas, url) => {

  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);

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0.01, 0.01, 0.15);

  const render = () => {
    renderer.render(scene, camera)
  };

	const mat = new THREE.MeshBasicMaterial();
 	mat.color = new THREE.Color(0xd78b4f);
  mat.side = THREE.DoubleSide;
  mat.map = texldr.load(
  	url,
  	() => { mat.color = new THREE.Color(0xffffff); render() },
    undefined,
    err => { console.log('texture load err:', err)}
  );
      
  const litmus = new THREE.Mesh(
  	new THREE.CylinderGeometry(1, 1, 5, 16), mat);
  litmus.position.set(0, 0, -10);

  scene.add(litmus);

  render();
}
const url = 'https://alikim.com/_v1_jsm/delayed.php';

render_scene(THREE_DEF, get('canvas_def') , url);
render_scene(THREE_MOD, get('canvas_mod'), url);