import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.114/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/OrbitControls.js";
import { DragControls } from "https://cdn.jsdelivr.net/npm/three@0.114/examples/jsm/controls/DragControls.js";
"use strict";
/*
Original article:
http://rodolphe-vaillant.fr/?e=127
----------------------------------------
World up vector: 'y' axis
edge size of a square: 100units
Old cdns (touch screen was not supported):
- THREE JS
https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js
- Orbit Control
https://s3-us-west-2.amazonaws.com/s.cdpn.io/945200/OrbitControls.js
- Drag Controls
https://cdn.rawgit.com/mrdoob/three.js/a1fb0b5b/examples/js/controls/DragControls.js
Forked / inspired by: https://zalo.github.io/
*/
/*
Display either circumcsphere, barycenter or insphere.
*/
var algoType = "Circumcenter";
//var algoType = "Barycenter";
//var algoType = "Incenter";
var g_camera, g_scene, g_renderer;
var g_controls;
function cross( a, b ) {
let res = new THREE.Vector3();
const ax = a.x, ay = a.y, az = a.z;
const bx = b.x, by = b.y, bz = b.z;
res.x = ay * bz - az * by;
res.y = az * bx - ax * bz;
res.z = ax * by - ay * bx;
return res;
}
/*
Handles the 4 blue spheres (tet's vertices)
and 4 transparent faces.
provides method to compute circumcenter etc.
*/
class Tetrahedron {
constructor() {
let sphereGeometry = new THREE.SphereBufferGeometry(1.0, 50, 50);
let material = new THREE.MeshPhongMaterial({ color: 0x3399dd });
this.vertexMesh = [];
// Initial values
var vert_positions = {
x1: new THREE.Vector3(-50, 20, 50),
x2: new THREE.Vector3(50, 20, -50),
x3: new THREE.Vector3(-50, 20, -50),
x4: new THREE.Vector3(0, 70, 0)
};
// Add dragable spheres
for (var v in vert_positions) {
var sphereMesh = new THREE.Mesh(sphereGeometry, material);
sphereMesh.scale.set(7, 7, 7);
var vert = vert_positions[v];
sphereMesh.position.set(vert.x, vert.y, vert.z);
sphereMesh.castShadow = true;
this.vertexMesh.push(sphereMesh);
}
this.buildFaces()
}
buildFaces() {
let material = new THREE.MeshPhongMaterial ({
color: 0xffa94b,
transparent: true,
opacity: 0.30,
side: THREE.DoubleSide,
depthWrite: true,
flatShading: true
});
let geom = new THREE.BufferGeometry();
geom.dynamic = true;
let v0 = this.get_vert(0);
let v1 = this.get_vert(1);
let v2 = this.get_vert(2);
let v3 = this.get_vert(3);
const vertices = new Float32Array([
v0.x, v0.y, v0.z,
v1.x, v1.y, v1.z,
v2.x, v2.y, v2.z,
v3.x, v3.y, v3.z
]);
geom.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
geom.setIndex([0, 1, 2,
0, 2, 3,
0, 3, 1,
1, 3, 2]);
this.tetMesh = new THREE.Mesh(geom, material);
this.tetMesh.renderOrder = 1;
}
addToScene(scene) {
for (let mesh of this.vertexMesh) {
scene.add(mesh);
}
scene.add(this.tetMesh)
}
addDraggableObjects(list) {
for (let mesh of this.vertexMesh) {
list.push(mesh);
}
}
//
updateGeom()
{
for (let v = 0; v < 4; v++) {
let p = this.get_vert(v);
this.tetMesh.geometry.attributes.position.setXYZ(v, p.x, p.y, p.z);
}
this.tetMesh.geometry.attributes.position.needsUpdate = true;
this.tetMesh.geometry.computeVertexNormals();
}
minDistanceFrom(cog) {
var minDist = cog.distanceTo(this.get_vert(0));
for (let v = 1; v < 4; v++) {
var dist = cog.distanceTo(this.get_vert(v));
if (minDist > dist)
minDist = dist;
}
return minDist;
}
circumcenter() {
var e1 = new THREE.Vector3();
e1.copy(this.get_vert(1));
var e2 = new THREE.Vector3();
e2.copy(this.get_vert(2));
var e3 = new THREE.Vector3();
e3.copy(this.get_vert(3));
e1.sub(this.get_vert(0));
e2.sub(this.get_vert(0));
e3.sub(this.get_vert(0));
var A = new THREE.Matrix3();
A.set(
e1.x, e1.y, e1.z,
e2.x, e2.y, e2.z,
e3.x, e3.y, e3.z);
if (true) {
var B = new THREE.Vector3();
B.set(this.get_vert(1).lengthSq() - this.get_vert(0).lengthSq(),
this.get_vert(2).lengthSq() - this.get_vert(0).lengthSq(),
this.get_vert(3).lengthSq() - this.get_vert(0).lengthSq());
B.multiplyScalar(0.5);
A.getInverse(A);
return B.applyMatrix3(A);
}
else
{
// alternative:
let a = cross(e2, e3).multiplyScalar( e1.lengthSq() );
let b = cross(e3, e1).multiplyScalar( e2.lengthSq() );
let c = cross(e1, e2).multiplyScalar( e3.lengthSq() );
const alpha = A.determinant() * 2.0;
let sum = new THREE.Vector3(0,0,0);
sum.add(a);
sum.add(b);
sum.add(c);
sum.divideScalar( alpha );
sum.add( this.get_vert(0) );
return sum;
}
}
static faceArea(a, b, c) {
let edge0 = b.sub(a);
let edge1 = c.sub(a);
return (edge0.cross(edge1)).length() / 2.0;
}
area1() { return Tetrahedron.faceArea(this.get_vert(0), this.get_vert(1), this.get_vert(2)); }
area2() { return Tetrahedron.faceArea(this.get_vert(0), this.get_vert(2), this.get_vert(3)); }
area3() { return Tetrahedron.faceArea(this.get_vert(0), this.get_vert(3), this.get_vert(1)); }
area4() { return Tetrahedron.faceArea(this.get_vert(1), this.get_vert(3), this.get_vert(2)); }
sumArea(){
return this.area1() + this.area2() + this.area3() + this.area4();
}
incenter() {
let sum = this.sumArea();
let incenter = new THREE.Vector3(0, 0, 0);
incenter.add(this.get_vert(0).multiplyScalar(this.area4()));
incenter.add(this.get_vert(1).multiplyScalar(this.area2()));
incenter.add(this.get_vert(2).multiplyScalar(this.area3()));
incenter.add(this.get_vert(3).multiplyScalar(this.area1()));
incenter.divideScalar(sum);
return incenter;
}
volume(){
// to be checked
// from wikipedia
let a = this.get_vert(0);
let b = this.get_vert(1);
let c = this.get_vert(2);
let d = this.get_vert(3);
return Math.abs( (a.sub(d)).dot( (b.sub(d)).cross(c.sub(d)) ) ) / 6.0;
}
inradius() {
if (false) {
// https://people.sc.fsu.edu/~jburkardt/presentations/cg_lab_tetrahedrons.pdf sec. 14
let a = this.get_vert(0);
let b = this.get_vert(1);
let c = this.get_vert(2);
let d = this.get_vert(3);
var A = new THREE.Matrix4();
A.set(
a.x, a.y, a.z, 1.0,
b.x, a.y, b.z, 1.0,
c.x, c.y, c.z, 1.0,
d.x, d.y, d.z, 1.0);
let alpha = A.determinant();
// Notice that in the paper they compute the cross product of edges
// but don't divide by 2, effectively computing : area*2.0
return Math.abs(alpha) / (this.sumArea()*2.0);
}
else
{
// from wikipedia
return (this.volume() * 3.0) / this.sumArea();
}
}
barycenter() {
var cog = new THREE.Vector3(0, 0, 0);
for (let v = 0; v < 4; v++) {
cog.add(this.get_vert(v));
}
cog.divideScalar(4);
return cog;
}
get_vert(i) {
var vert = new THREE.Vector3();
vert.copy(this.vertexMesh[i].position);
return vert;
}
set_vert(i, pos) {
this.vertexMesh[i].position = pos;
}
}
var g_tetrahedron = null;
// The mesh representing our "center of gravity"
// (i.e. barycenter, circumcenter or incenter according to the selected option)
var g_cogPointMesh;
// The transparent sphere that either:
// - fit the 4 vertices of our tetrahedron. (circumcenter)
// - fit inside the faces of our tetrahedron (incenter)
// - somewhat fits inside the tetrahedron (barycenter/ radius == nearest vertex)
var g_fittedSphereMesh;
function mat(col){
return new THREE.MeshLambertMaterial({ color: col });
}
init();
animate();
function init() {
let container = document.createElement('div');
document.body.appendChild(container);
g_camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 2000);
g_camera.position.set(50, 100, 150);
g_scene = new THREE.Scene();
g_scene.background = new THREE.Color(0xffffff);//0xa0a0a0
g_scene.fog = new THREE.Fog(0xffffff, 200, 800);//0xa0a0a0
let light1 = new THREE.HemisphereLight(0xffffff, 0x444444);
light1.position.set(0, 200, 0);
g_scene.add(light1);
let light2 = new THREE.DirectionalLight(0xbbbbbb);
light2.position.set(0, 200, 100);
light2.castShadow = true;
light2.shadow.camera.top = 180;
light2.shadow.camera.bottom = - 100;
light2.shadow.camera.left = - 120;
light2.shadow.camera.right = 120;
g_scene.add(light2);
//scene.add(new THREE.CameraHelper(light.shadow.camera));
// ground
let mesh = new THREE.Mesh(new THREE.PlaneBufferGeometry(2000, 2000), new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false }));
mesh.rotation.x = - Math.PI / 2;
mesh.receiveShadow = true;
g_scene.add(mesh);
let grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
grid.material.opacity = 0.2;
grid.material.transparent = true;
g_scene.add(grid);
g_renderer = new THREE.WebGLRenderer({ antialias: true });
g_renderer.setPixelRatio(window.devicePixelRatio);
g_renderer.setSize(window.innerWidth, window.innerHeight);
g_renderer.shadowMap.enabled = true;
document.body.style.margin = 0;
document.body.style.padding = 0;
document.body.style.overflow = 'hidden';
document.body.style.position = 'fixed';
container.appendChild(g_renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
g_controls = new /*THREE.*/OrbitControls(g_camera, g_renderer.domElement);
g_controls.target.set(0, 45, 0);
g_controls.update();
//if( text.option != "Drag1" )
// return;
var draggableObjects = [];
var sphereGeometry = new THREE.SphereBufferGeometry(1.0, 50, 50);
var red = new THREE.MeshPhongMaterial({ color: 0xdd9933 });
var invertEllipsoid = false;
var material = new THREE.MeshLambertMaterial({
color: 0x777777,
transparent: true,
opacity: 0.45,
side: invertEllipsoid ? THREE.BackSide : THREE.FrontSide,
depthWrite: false });
g_tetrahedron = new Tetrahedron()
g_tetrahedron.addToScene(g_scene)
g_tetrahedron.addDraggableObjects(draggableObjects)
// Set up transparent sphere
g_fittedSphereMesh = new THREE.Mesh(sphereGeometry, material);
g_fittedSphereMesh.scale.set(150, 150, 150);
g_fittedSphereMesh.castShadow = false;
g_fittedSphereMesh.renderOrder = 0;
g_scene.add(g_fittedSphereMesh);
g_cogPointMesh = new THREE.Mesh(sphereGeometry, red);
g_scene.add(g_cogPointMesh);
g_cogPointMesh.scale.set(2, 2, 2);
g_cogPointMesh.position.set(0, 0, 0);
g_cogPointMesh.castShadow = true;
var dragControls = new /*THREE.*/DragControls(draggableObjects, g_camera, g_renderer.domElement);
dragControls.addEventListener('dragstart', function () {
g_controls.enabled = false;
});
dragControls.addEventListener('dragend', function () {
g_controls.enabled = true;
});
}
function onWindowResize() {
g_camera.aspect = window.innerWidth / window.innerHeight;
g_camera.updateProjectionMatrix();
g_renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
var cog;
var radius = 1.0;
g_fittedSphereMesh.visible = true;
switch (algoType) {
case "Circumcenter":
cog = g_tetrahedron.circumcenter();
radius = g_tetrahedron.minDistanceFrom(cog);
break;
case "Barycenter":
cog = g_tetrahedron.barycenter();
radius = g_tetrahedron.minDistanceFrom(cog);
g_fittedSphereMesh.visible = false;
break;
case "Incenter":
cog = g_tetrahedron.incenter();
radius = g_tetrahedron.inradius();
break;
default:
cog = new THREE.Vector3(0, 0, 0);
break;
}
// update objects:
g_cogPointMesh.position.copy(cog);
g_fittedSphereMesh.position.copy(cog);
g_fittedSphereMesh.scale.set(radius, radius, radius);
// Must be last:
g_tetrahedron.updateGeom()
requestAnimationFrame(animate);
g_renderer.render(g_scene, g_camera);
}
!
