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(0, 10, 10);
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());
scene.add(new THREE.AxesHelper());

const curve = new THREE.EllipseCurve(
    0,  0,            // ax, aY
    5, 3,           // xRadius, yRadius
    0,  2 * Math.PI,  // aStartAngle, aEndAngle
    false,            // aClockwise
    0                 // aRotation
);

let pts = curve.getSpacedPoints(50);

pts.forEach(p => {p.z = -p.y; p.y = 0;}); // z = -y; y = 0

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

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