JSFiddle - React, Tailwind, and code Playground

by devAhsan

HTML

<canvas id="c"></canvas>

JavaScript

import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r125/build/three.module.js';

    function main() {
      const canvas = document.querySelector('#c');
      const renderer = new THREE.WebGLRenderer({canvas});

      const fov = 75;
      const aspect = 2;  // the canvas default
      const near = 1;
      const far = 100;
      const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
      camera.position.z = 40;

      const scene = new THREE.Scene();

      const boxWidth = 20;
      const boxHeight = 20;
      const geometry = new THREE.PlaneGeometry(boxWidth, boxHeight);

      const ctx = document.createElement('canvas').getContext('2d');
      ctx.canvas.width = 5;
      ctx.canvas.height = 5;
      ctx.fillStyle = 'white';
      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(0, 0);
      ctx.lineTo(5, 0);
      ctx.stroke();
      const texture = new THREE.CanvasTexture(ctx.canvas);
      texture.wrapS = THREE.RepeatWrapping;
      texture.wrapT = THREE.RepeatWrapping;
      // texture.repeat.set(4, 4); // dont know the polygon size beforehand
      texture.magFilter = THREE.NearestFilter

      const material = new THREE.MeshBasicMaterial({
        map: texture,
      });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      renderer.render(scene, camera);
    }

    main();