JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://cdn.skypack.dev/[email protected]";
import {
  OrbitControls
} from "https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

let controls = new OrbitControls(camera, renderer.domElement);

let r1 = 1;
let r2 = 2;
let size = new THREE.Vector2(8, 5);

let path = new THREE.Path();
path.moveTo(0, 0);
path.absarc(size.x - r2, r2, r2, Math.PI * 1.5, Math.PI * 2);
path.moveTo(size.x, size.y);
path.absarc(r1, size.y - r1, r1, Math.PI * 0.5, Math.PI);
path.lineTo(0, 0);
path.autoClose = true;

let g = new THREE.BufferGeometry().setFromPoints(path.getPoints(50));
g.center();
let m = new THREE.LineBasicMaterial({color: "aqua"});
let l = new THREE.Line(g, m);
scene.add(l)

window.addEventListener("resize", onResize);

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

function onResize(event) {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
}