JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 4, 4);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

scene.add(new THREE.GridHelper(6, 6, "yellow"));

var pts = [
	new THREE.Vector3(-1, 0, -1),
	new THREE.Vector3(0, 0, -2),
	new THREE.Vector3(2, 0, -2),
	new THREE.Vector3(2, 0, 1)
];

var ptsShape = pts.map( p => {return new THREE.Vector2(p.x, -p.z)});
console.log(ptsShape);

var shape = new THREE.Shape(ptsShape);

var shapeGeom = new THREE.ShapeBufferGeometry(shape);
shapeGeom.rotateX(-Math.PI * 0.5);

var shapeMat = new THREE.MeshBasicMaterial({color: "aqua"});

var shapeMesh = new THREE.Mesh(shapeGeom, shapeMat);

scene.add(shapeMesh);

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