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 litmus = new THREE.Mesh(
    new THREE.PlaneGeometry(5, 5),
    new THREE.MeshBasicMaterial({
      color: 0x990099,
      side: THREE.DoubleSide,
      map: texldr.load(
        url,
        render,
        undefined,
        err => {
          console.log('texture load err:', err)
        }
      )
    })
  );
  litmus.material.needsUpdate = true;
  litmus.material.map.needsUpdate = true;
  litmus.position.set(0, 0, -10);

  scene.add(litmus);

  render();
}
const url = 'https://source.unsplash.com/random/200x200';

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