JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body{
	overflow: hidden;
  margin: 0;
}

JavaScript

console.clear();
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(10, 10, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

let g = new THREE.BufferGeometry().setFromPoints([
	[-5, 5], [5, 5], [5, -5], [-5, -5], [-5, 5]
].map(p => {return new THREE.Vector2(p[0], p[1])}));
let m = new THREE.LineDashedMaterial({dashSize: 0.25, gapSize: 0.25});
let l = new THREE.Line(g,m);
l.computeLineDistances();
scene.add(l);

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