Arc3D

by Paul West

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
  font-family: Monospace;
  font-size: 8pt;
}

JavaScript

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

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

scene.add(new THREE.AxesHelper(1));

var sphereRadius = 10;
var sphere = new THREE.Mesh(new THREE.SphereGeometry(sphereRadius, 32, 16), new THREE.MeshBasicMaterial({
  color: "maroon",
  //wireframe: true,
  transparent: true,
  opacity: 0.25
}));
scene.add(sphere);

var zeroPoint = new THREE.Vector3();
var pointStart = new THREE.Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1).normalize().multiplyScalar(sphereRadius);
var pointEnd = new THREE.Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1).normalize().multiplyScalar(sphereRadius);

spot(pointStart, 0xff0000);
spot(pointEnd, 0x00ff00);

function spot(point, color) {
  var s = new THREE.Mesh(new THREE.SphereGeometry(0.1, 32, 24), new THREE.MeshBasicMaterial({
    color: color
  }));
  s.position.copy(point);
  scene.add(s);
}

var triGeom = new THREE.BufferGeometry().setFromPoints([zeroPoint, pointStart, pointEnd]);
var line = new THREE.Line(new THREE.BufferGeometry().setFromPoints([zeroPoint, pointStart, pointEnd, zeroPoint]), new THREE.LineBasicMaterial({
  color: "yellow"
}));
sphere.add(line);
var triangle = new THREE.Mesh(triGeom, new THREE.MeshBasicMaterial({
  color: "yellow",
  transparent: false,
  opacity: 0.5,
  side: THREE.DoubleSide
}));
sphere.add(triangle);


var newArc1 = setArc3D(pointStart, pointEnd, 50, "lime", false);
sphere.add(newArc1);
var newArc2 = setArc3D(pointStart, pointEnd, 50, "skyblue", true);
sphere.add(newArc2);

function setArc3D(pointStart, pointEnd, smoothness, color, clockWise) {
  // calculate...