JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<script src="https://unpkg.com/[email protected]/build/three.js"></script>
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/[email protected]/src/THREE.MeshLine.js"></script>
x<sup>2</sup> = 4 - y<sup>2</sup>

JavaScript

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xffffff);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(400, 400);
document.body.appendChild(renderer.domElement);

const camera = new THREE.OrthographicCamera(-7, 7, 7, -7, 1, 1000);
camera.position.set(0, 30, 0);
camera.lookAt(0, 0, 0);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.maxPolarAngle = 0.5 * Math.PI; // Prevent looking up from underneath
controls.update();

// Lighting
const pointLight = new THREE.PointLight(0xffffff, 0.5, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

const light = new THREE.AmbientLight(0xffffff, 0.7); // soft white light
scene.add(light);

const points = [];
for (let theta = 0; theta <= 2 * Math.PI; theta += Math.PI / 50) {
	points.push(Math.cos(theta) * 2, (Math.cos(theta) * 2)**2, Math.sin(theta) * 2);
}

const line = new MeshLine();
line.setPoints(points);

const mesh = new THREE.Mesh(
	line,
  new MeshLineMaterial({
    color: 0x000000,
    sizeAttenuation: 0,
    lineWidth: 0.02,
    depthTest: false,
    transparent: true,
  })
);
mesh.renderOrder = 1;
scene.add(mesh);

let surfaceMaterials = [];

function createSurface(f, color = 0xffaaaa, width = 4, height = 4, wSeg = 20, hSeg = 20) {
	const planeGeom = new THREE.PlaneBufferGeometry(width, height, wSeg, hSeg);
  planeGeom.rotateX(-Math.PI * 0.5);

  const v = new THREE.Vector3();
  const positions = planeGeom.attributes.position;
  for (let i = 0; i < positions.count; i++) {
    v.fromBufferAttribute(positions, i);
    positions.setY(i, f(v.x, v.z));
  }
  planeGeom.computeVertexNormals();
  
  const surfaceMaterial = new THREE.MeshStandardMaterial({
    transparent: true,
    side: THREE.DoubleSide,
    color: color,	
    // flatShading: true,
    // wireframe: true
  });
  surfaceMaterials.push(surfaceMaterial);

  return new THREE.Mesh(planeGeom, surfaceMaterial);
}

// Two surfaces
const paraboloidSurface =...