JSFiddle - React, Tailwind, and code Playground

by alexvestin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>

JavaScript

let c = document.createElement("canvas");
let ctx = c.getContext("2d");
c.width = 256;
c.height = 256;
ctx.strokeStyle = "#FF0000"

const tex = new THREE.CanvasTexture(c);
const mesh = new THREE.Mesh(new THREE.PlaneGeometry(2,2), new THREE.MeshBasicMaterial({map:tex, transparent: true}));
const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-1,1,1,-1,0.1,1000);
const renderer = new THREE.WebGLRenderer();

scene.add(mesh)
renderer.setSize(256,256)
document.body.appendChild(renderer.domElement);
camera.position.z  = 1;

ctx.shadowBlur = 100;
ctx.shadowColor = "red";
const os = 3;
ctx.shadowOffsetX = os;
ctx.shadowOffsetY = os;

let update = () => {
	let t = performance.now() / 1000;
  ctx.clearRect(0,0,256,256);
  ctx.beginPath();
  for(var i = 0; i < 256; i++) {
  	const x = i;
    const y = 128 + Math.sin(t + i / 32) * 127;
    
    if(i === 0)
    	ctx.moveTo(x,y);
    else
    	ctx.lineTo(x,y);
     
  }
  ctx.stroke();
  
  tex.needsUpdate = true;
  renderer.render(scene, camera);
  requestAnimationFrame(update);
  console.log(scene.children)
  
}

requestAnimationFrame(update);