Skip to content
Snippets Groups Projects
Unverified Commit 956681a2 authored by Jamie Temple's avatar Jamie Temple
Browse files

feat: visualisation quaternions

parent 454a72af
No related branches found
No related tags found
1 merge request!1feat: base project
Show whitespace changes
Inline Side-by-side
Showing
with 252 additions and 92 deletions
favicon.svg deleted 100644 → 0
+ 0
− 15
View file @ 454a72af
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>
icon.svg 0 → 100644
+ 1
− 0
View file @ 956681a2
<?xml version="1.0"?><svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50px" height="50px"> <path d="M 19.439453 14 C 8.6994531 14 0 18.92 0 25 C 2.3684758e-15 31.07 8.6994531 36 19.439453 36 C 26.419453 36 32.530938 33.799922 35.960938 30.669922 C 32.830938 32.539922 28.140391 33.599609 22.900391 33.599609 C 13.470391 33.599609 5.8300781 29.75 5.8300781 25 C 5.8300781 23.561756 6.5408111 22.208905 7.7792969 21.017578 L 10.089844 29.810547 L 11.679688 29.810547 L 13.917969 21.855469 L 16.130859 29.810547 L 17.724609 29.810547 L 20.478516 19.683594 L 18.685547 19.683594 L 16.892578 27.453125 L 14.726562 19.683594 L 13.082031 19.683594 L 10.921875 27.453125 L 9.1738281 19.902344 C 12.2821 17.781579 17.264272 16.400391 22.900391 16.400391 C 28.160391 16.400391 32.87 17.479375 36 19.359375 C 32.58 16.209375 26.449453 14 19.439453 14 z M 38.089844 20.220703 C 37.376844 20.220703 36.737922 20.347609 36.169922 20.599609 C 35.601922 20.852609 35.122422 21.200531 34.732422 21.644531 C 34.342422 22.088531 34.043937 22.609078 33.835938 23.205078 C 33.627937 23.802078 33.523438 24.450484 33.523438 25.146484 C 33.523438 25.825484 33.629891 26.458875 33.837891 27.046875 C 34.045891 27.634875 34.343375 28.147031 34.734375 28.582031 C 35.125375 29.018031 35.604828 29.359422 36.173828 29.607422 C 36.742828 29.855422 37.383703 29.980469 38.095703 29.980469 C 38.546703 29.980469 38.992547 29.886219 39.435547 29.699219 C 39.878547 29.512219 40.282438 29.184844 40.648438 28.714844 L 40.857422 29.769531 L 42.154297 29.769531 L 42.154297 24.736328 L 38.253906 24.736328 L 38.253906 26.267578 L 40.310547 26.267578 C 40.249547 26.917578 40.034062 27.415813 39.664062 27.757812 C 39.294062 28.100812 38.77175 28.271484 38.09375 28.271484 C 37.63275 28.271484 37.240922 28.182906 36.919922 28.003906 C 36.598922 27.824906 36.338672 27.587016 36.138672 27.291016 C 35.938672 26.995016 35.792172 26.662969 35.701172 26.292969 C 35.610172 25.922969 35.564453 25.540437 35.564453 25.148438 C 35.564453 24.739437 35.610172 24.343937 35.701172 23.960938 C 35.792172 23.576938 35.936719 23.236547 36.136719 22.935547 C 36.335719 22.635547 36.596969 22.395797 36.917969 22.216797 C 37.238969 22.037797 37.629844 21.949219 38.089844 21.949219 C 38.583844 21.949219 39.005516 22.078844 39.353516 22.339844 C 39.700516 22.600844 39.934641 22.992672 40.056641 23.513672 L 42.009766 23.513672 C 41.957766 22.983672 41.812125 22.512516 41.578125 22.103516 C 41.344125 21.694516 41.0475 21.351266 40.6875 21.072266 C 40.3275 20.793266 39.923563 20.5815 39.476562 20.4375 C 39.029563 20.2935 38.566844 20.220703 38.089844 20.220703 z M 43.429688 20.455078 L 43.429688 29.763672 L 50 29.763672 L 50 28.035156 L 45.46875 28.035156 L 45.46875 20.455078 L 43.429688 20.455078 z M 26.496094 20.607422 L 26.496094 29.810547 L 27.748047 29.810547 L 27.748047 29.185547 C 27.858047 29.329547 27.998547 29.481234 28.185547 29.615234 C 28.542547 29.871234 28.982141 30 29.494141 30 C 30.044141 30 30.534172 29.876766 30.951172 29.634766 C 31.323172 29.418766 31.639672 29.108938 31.888672 28.710938 C 32.106672 28.363937 32.271859 27.953141 32.380859 27.494141 C 32.474859 27.097141 32.523438 26.663281 32.523438 26.238281 C 32.522438 25.768281 32.459031 25.325922 32.332031 24.919922 C 32.204031 24.510922 32.014484 24.149656 31.771484 23.847656 C 31.519484 23.535656 31.215234 23.293953 30.865234 23.126953 C 30.499234 22.952953 30.089484 22.863281 29.646484 22.863281 L 29.644531 22.863281 C 29.235531 22.870281 28.862156 22.959906 28.535156 23.128906 C 28.265156 23.268906 28.0225 23.464844 27.8125 23.714844 L 27.8125 20.607422 L 26.496094 20.607422 z M 22.736328 22.861328 C 22.192328 22.861328 21.702297 22.959297 21.279297 23.154297 C 20.878297 23.339297 20.537672 23.611891 20.263672 23.962891 C 19.756672 24.612891 19.488281 25.529328 19.488281 26.611328 C 19.488281 27.093328 19.556406 27.544125 19.691406 27.953125 C 19.826406 28.365125 20.026156 28.728297 20.285156 29.029297 C 20.829156 29.662297 21.604344 29.996094 22.527344 29.996094 C 23.012344 29.996094 23.409281 29.945797 23.738281 29.841797 C 24.026281 29.750797 24.216047 29.633297 24.373047 29.529297 C 24.575047 29.396297 24.761781 29.232969 24.925781 29.042969 C 25.064781 28.881969 25.188922 28.701813 25.294922 28.507812 C 25.483922 28.160812 25.574703 27.836063 25.595703 27.664062 L 25.609375 27.550781 L 24.287109 27.550781 L 24.28125 27.644531 C 24.24825 28.074531 23.684641 28.841797 22.681641 28.841797 C 21.246641 28.841797 20.904812 27.803672 20.882812 26.888672 L 25.685547 26.888672 L 25.685547 26.785156 C 25.685547 26.195156 25.624859 25.657547 25.505859 25.185547 C 25.382859 24.701547 25.198031 24.284312 24.957031 23.945312 C 24.708031 23.594313 24.39725 23.324578 24.03125 23.142578 C 23.65525 22.955578 23.219328 22.861328 22.736328 22.861328 z M 22.585938 24.054688 C 23.649938 24.054688 24.218266 24.627641 24.322266 25.806641 L 20.882812 25.806641 C 20.932812 24.847641 21.692938 24.054688 22.585938 24.054688 z M 29.443359 24.058594 C 30.156359 24.058594 30.632391 24.337109 30.900391 24.912109 C 31.120391 25.388109 31.150391 25.965062 31.150391 26.414062 C 31.150391 27.137062 31.005469 27.741063 30.730469 28.164062 C 30.438469 28.615063 30.01275 28.84375 29.46875 28.84375 C 28.68175 28.84375 27.761719 28.292281 27.761719 26.738281 C 27.761719 25.994281 27.853969 25.422281 28.042969 24.988281 C 28.315969 24.362281 28.773359 24.058594 29.443359 24.058594 z"/></svg>
\ No newline at end of file
index.html
+ 2
− 2
View file @ 956681a2
......@@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/svg+xml" href="icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/style.css" />
<title>Vite App</title>
<title>Computergrafik 3</title>
</head>
<body>
<script type="module" src="/src/Main.ts"></script>
......
pages/bezier.html
+ 2
− 3
View file @ 956681a2
......@@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Vite App</title>
<title>Computergrafik 3</title>
</head>
<body>
<script type="module" src="/src/Main.ts"></script>
......@@ -15,6 +15,5 @@
<a href="quaternion.html">Quaternions</a>
<a href="simulation.html">Cloth Simulation</a>
</nav>
</body>
</html>
pages/example.html
+ 2
− 2
View file @ 956681a2
......@@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Vite App</title>
<title>Computergrafik 3</title>
</head>
<body>
<script type="module" src="/src/Main.ts"></script>
......
pages/quaternion.html
+ 2
− 2
View file @ 956681a2
......@@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Vite App</title>
<title>Computergrafik 3</title>
</head>
<body>
<script type="module" src="/src/Main.ts"></script>
......
pages/simulation.html
+ 2
− 2
View file @ 956681a2
......@@ -2,10 +2,10 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link rel="icon" type="image/svg+xml" href="../icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../src/style.css" />
<title>Vite App</title>
<title>Computergrafik 3</title>
</head>
<body>
<script type="module" src="/src/Main.ts"></script>
......
src/02-quaternion/DemoQuaternion.ts
+ 6
− 0
View file @ 956681a2
......@@ -3,6 +3,7 @@ import { PipelineData } from "../core/Pipeline";
import { TriangleMesh } from "../core/TriangleMesh";
import { Axes } from './Axes';
import { Rotator } from './Rotator';
import { RotationHelper } from './RotatorHelper';
class QuaternionDemo extends PipelineData {
public constructor() { super(); }
......@@ -29,6 +30,11 @@ class QuaternionDemo extends PipelineData {
const rotator: Rotator = new Rotator(rotationObject.object());
this.addObserver(rotator);
this.addGUI(rotator);
const rotationHelper = new RotationHelper(rotator, new THREE.Color(0xffffff), new THREE.Color(0xff0000));
this.addObject(rotationHelper);
this.addObserver(rotationHelper);
this.addDraggable(rotationHelper);
}
}
......
src/02-quaternion/Quaternion.ts
+ 40
− 28
View file @ 956681a2
......@@ -97,38 +97,50 @@ export class Quaternion {
}
public static slerp(qa: Quaternion, qb: Quaternion, t: number): Quaternion {
const cosTheta = Quaternion.dot(qa, qb);
if (cosTheta > .9995) {
return Quaternion.add(Quaternion.multiplyScalar(qa, 1 - t), Quaternion.multiplyScalar(qb, t));
} else {
const theta = Math.acos(cosTheta);
const thetap = theta * t;
const qperp = Quaternion.normalize(Quaternion.subtract(qb, Quaternion.multiplyScalar(qa, cosTheta)));
return Quaternion.add(Quaternion.multiplyScalar(qa, Math.cos(thetap)), Quaternion.multiplyScalar(qperp, Math.sin(thetap)));
}
}
let cq1 = qa.clone();
let cq2 = qb.clone();
// public static slerp(qa: Quaternion, qb: Quaternion, t: number): Quaternion {
cq1 = Quaternion.normalize(cq1);
cq2 = Quaternion.normalize(cq2);
// let cq1 = qa.clone();
// let cq2 = qb.clone();
let costheta = Quaternion.dot(cq1, cq2);
// cq1 = Quaternion.normalize(cq1);
// cq2 = Quaternion.normalize(cq2);
if (costheta < 0.0) {
cq2 = Quaternion.inverse(cq2);
costheta = -costheta;
}
// let dot = Quaternion.dot(cq1, cq2);
if (costheta > 0.9995) {
return Quaternion.add(cq1, Quaternion.multiplyScalar(
Quaternion.subtract(cq2, cq1), t));
}
// if (dot < 0.0) {
// cq2 = Quaternion.inverse(cq2);
// dot = -dot;
// }
const theta = Math.acos(costheta);
const thetat = theta * t;
// if (dot > 0.9995) {
// return Quaternion.add(cq1, Quaternion.multiplyScalar(
// Quaternion.subtract(cq2, cq1), t));
// }
const sinthetat = Math.sin(thetat);
const sintheta = Math.sin(theta);
const s0 = Math.cos(theta) - costheta * sinthetat / sintheta;
const s1 = sinthetat / sintheta;
// const theta0 = Math.acos(dot);
// const theta = theta0 * t;
return Quaternion.add(
Quaternion.multiplyScalar(cq1, s0),
Quaternion.multiplyScalar(cq2, s1)
)
}
// const sinTheta0 = Math.sin(theta0);
// const sinTheta = Math.sin(theta);
// const s0 = Math.cos(theta0) - dot * sinTheta / sinTheta0;
// const s1 = sinTheta / sinTheta0;
// return Quaternion.add(
// Quaternion.multiplyScalar(cq1, s0),
// Quaternion.multiplyScalar(cq2, s1)
// )
// }
public static add(qa: Quaternion, qb: Quaternion): Quaternion {
return new Quaternion(qa._x + qb._x, qa._y + qb._y, qa._z + qb._z, qa._w + qb._w);
......@@ -165,14 +177,14 @@ export class Quaternion {
}
public static normalize(qa: Quaternion): Quaternion {
const root = Quaternion.len(qa);
if (root < 0.00001) {
const length = Quaternion.len(qa);
if (length < 0.00001) {
return Quaternion.identity();
}
return Quaternion.multiplyScalar(qa, 1 / root);
return Quaternion.multiplyScalar(qa, 1 / length);
}
public static inverse(qa: Quaternion): Quaternion {
return Quaternion.multiplyScalar(qa, -1);
return new Quaternion(-qa._x, -qa._y, -qa._z, qa._w);
}
}
\ No newline at end of file
src/02-quaternion/Rotator.ts
+ 88
− 24
View file @ 956681a2
......@@ -16,6 +16,8 @@ class Rotator implements PipelineObserver, PipelineGUI {
private _guiRoot!: dat.GUI;
private _rangeController!: dat.GUIController;
private _slerp: Quaternion = new Quaternion();
public constructor(objectReference: THREE.Object3D) {
this._objectReference = objectReference;
this._orientations = [];
......@@ -23,27 +25,82 @@ class Rotator implements PipelineObserver, PipelineGUI {
// TODO: Extract controls to seperate class
document.addEventListener('keydown', (event: KeyboardEvent) => {
if (event.key === 'e') {
this.addQuaternion();
} else if (event.key === 'E') {
this.popQuaternion();
} else if (event.key === ' ' && this._orientations.length > 1) {
this._index = (this._index + 1) % this._orientations.length;
} else if (event.key === 'q') {
this._mode = (this._mode === Mode[0]) ? Mode[1] : Mode[0];
} else if (event.key === 'n') {
this.normaliseQuaternions();
}
if (this._orientations.length < 1) {
return;
}
if (this._mode === Mode[0]) {
let step = 0.1;
if (event.shiftKey) {
step = -step;
}
if (event.key.toLowerCase() === 'a') {
switch (event.key) {
case 'a':
case 'A':
this._orientations[this._index].x += step;
this._orientations[this._index].x = this._orientations[this._index].x % (2 * Math.PI);
}
if (event.key.toLowerCase() === 's') {
break;
case 's':
case 'S':
this._orientations[this._index].y += step;
this._orientations[this._index].y = this._orientations[this._index].y % (2 * Math.PI);
}
if (event.key.toLowerCase() === 'd') {
break;
case 'd':
case 'D':
this._orientations[this._index].z += step;
this._orientations[this._index].z = this._orientations[this._index].z % (2 * Math.PI);
break;
case 'w':
case 'W':
this._orientations[this._index].w += step;
break;
}
} else {
switch (event.key) {
case 'a':
case 'A':
this._t += .001;
break;
case 'd':
case 'D':
this._t -= .001;
break;
}
this._t = Math.max(0, Math.min(1, this._t));
console.log(this._t);
}
});
}
public get orientations(): Array<Quaternion> {
return this._orientations;
}
public get index(): number {
return this._index;
}
public get slerp(): Quaternion {
return this._slerp;
}
public get mode(): string {
return this._mode;
}
private addQuaternion(): void {
if (this._orientations.length >= 5) {
return;
......@@ -74,10 +131,10 @@ class Rotator implements PipelineObserver, PipelineGUI {
private createQuaternionGUI(gui: dat.GUI, q: Quaternion): void {
const folder = gui.addFolder('Quaternion ' + this._orientations.length);
folder.add(q, 'x', -1, 1, .01).listen();
folder.add(q, 'y', -1, 1, .01).listen();
folder.add(q, 'z', -1, 1, .01).listen();
folder.add(q, 'w', -1, 1, .01).listen();
folder.add(q, 'x').step(.001).listen();
folder.add(q, 'y').step(.001).listen();
folder.add(q, 'z').step(.001).listen();
folder.add(q, 'w').step(.001).listen();
folder.closed = false;
}
......@@ -91,10 +148,15 @@ class Rotator implements PipelineObserver, PipelineGUI {
this._guiRoot.__folders["Quaternion " + (i + 1)].open();
}
});
folder.add(this, "_t", 0, 1, 0.01).listen().name("t");
folder.add(this, 'addQuaternion').name("Add Quaternion");
folder.add(this, 'popQuaternion').name("Pop Quaternion");
folder.add(this, 'normaliseQuaternions').name("Normalise Quaternions");
const slerpGUI = folder.addFolder("Slerp");
slerpGUI.add(this, "_t", 0, 1, 0.001).listen().name("t");
slerpGUI.add(this._slerp, "x").step(.001).listen().name("x");
slerpGUI.add(this._slerp, "y").step(.001).listen().name("y");
slerpGUI.add(this._slerp, "z").step(.001).listen().name("z");
slerpGUI.add(this._slerp, "w").step(.001).listen().name("w");
this._rangeController = folder.add(this, '_index', 0, this._orientations.length - 1, 1).name("Index").listen();
folder.closed = false;
this._guiRoot = folder;
......@@ -109,8 +171,10 @@ class Rotator implements PipelineObserver, PipelineGUI {
result = Quaternion.slerp(result, this._orientations[i], this._t);
}
this._objectReference.setRotationFromMatrix(result.eulerMatrix);
this._slerp.copy(result);
}
}
}
export {Rotator}
export { Rotator, Mode }
export type { }
src/02-quaternion/RotatorHelper.ts 0 → 100644
+ 96
− 0
View file @ 956681a2
import * as THREE from "three";
import { Line1d } from "../core/Lines";
import { PipelineDraggable, PipelineObserver } from "../core/Pipeline";
import { Point3d } from "../core/Points";
import { Shape } from "../core/Shapes";
import { Quaternion } from "./Quaternion";
import { Rotator, Mode } from "./Rotator";
class RotationHelper extends Shape implements PipelineObserver, PipelineDraggable {
private _unitSphere: THREE.Mesh;
private _qPoints: Array<Point3d>;
private _qLines: Array<Line1d>;
private _quaternionsReference: Array<Quaternion>;
private _slerpReference: Quaternion;
private _rotator: Rotator;
constructor(rotator: Rotator, primeColor: THREE.Color = new THREE.Color(1,1,1),
secColor: THREE.Color = new THREE.Color(1,0,0), terColor: THREE.Color = new THREE.Color(0,1,1)) {
super();
this._rotator = rotator;
this._quaternionsReference = rotator.orientations;
this._slerpReference = rotator.slerp;
const geometrySphere = new THREE.SphereBufferGeometry(1, 32, 32);
const matSphere = new THREE.MeshBasicMaterial({ color: primeColor, opacity: 0.9, transparent: true });
this._unitSphere = new THREE.Mesh(geometrySphere, matSphere);
this._qPoints = [];
this._qLines = [];
for (let i = 0; i < 5; i++)
{
this._qPoints.push(new Point3d(.05, 16));
this._qPoints[i].material = new THREE.MeshBasicMaterial({ color: secColor });
this._qLines.push(new Line1d([new THREE.Vector3(), new THREE.Vector3()], secColor));
}
this._qPoints.push(new Point3d(.05, 16));
this._qPoints[5].material = new THREE.MeshBasicMaterial({ color: terColor });
this._object3d = new THREE.Group();
this._object3d.add(this._unitSphere);
for (let i = 0; i < 6; i++)
this._object3d.add(this._qPoints[i].object());
for (let i = 0; i < 5; i++)
this._object3d.add(this._qLines[i].object());
}
update(_deltaTime: number): void {
for (let i = 0; i < this._quaternionsReference.length; i++) {
// SET POINT POSITION
let q = this._quaternionsReference[i];
let p = new THREE.Vector3(q.x, q.y, q.z).normalize().add(this._unitSphere.position);
this._qPoints[i]._object3d.position.set(p.x, p.y, p.z);
// SET POINT COLOR
let nq = Quaternion.normalize(q);
((this._qPoints[i]._object3d as THREE.Mesh).material as THREE.MeshBasicMaterial)
.color.set(new THREE.Color(Math.cos(nq.w),Math.sin(nq.w), 1));
// SET LINE POSITION
let p1 = new THREE.Vector3(q.x, q.y, q.z).normalize().multiplyScalar(1.2);
let p2 = p1.clone().multiplyScalar(-1);
this._qLines[i].points = [p1.add(this._unitSphere.position), p2.add(this._unitSphere.position)];
((this._qLines[i]._object3d as THREE.Line).material as THREE.LineBasicMaterial)
.color.set(new THREE.Color(Math.cos(nq.w),Math.sin(nq.w), 1));
}
for (let i = this._quaternionsReference.length; i < this._qPoints.length - 1; i++) {
let p = this._unitSphere.position;
this._qPoints[i]._object3d.position.set(p.x, p.y, p.z);
this._qLines[i].points = [p, p];
this._qLines[i].points = [p, p];
}
if (this._rotator.mode === Mode[1]) {
let q = this._slerpReference;
let p = new THREE.Vector3(q.x, q.y, q.z);
p.normalize().add(this._unitSphere.position);
this._qPoints[5]._object3d.position.set(p.x, p.y, p.z);
q = Quaternion.normalize(q);
((this._qPoints[5]._object3d as THREE.Mesh).material as THREE.MeshBasicMaterial).color.set(new THREE.Color(Math.cos(q.w),Math.sin(q.w), 1));
} else {
let p = this._unitSphere.position;
this._qPoints[5]._object3d.position.set(p.x, p.y, p.z);
}
}
hitbox(): THREE.Object3D {
return this._unitSphere;
}
}
export {RotationHelper}
\ No newline at end of file
src/core/TriangleMesh.ts
+ 10
− 12
View file @ 956681a2
......@@ -9,20 +9,18 @@ class TriangleMesh extends Shape implements PipelineDraggable {
const objLoader = new OBJLoader();
objLoader.load(obj, (object: THREE.Group) => {
object.name = "obj";
localStorage.setItem("obj", JSON.stringify(object));
});
const jsonString = localStorage.getItem("obj");
if (!jsonString) {
throw new Error("No object found in local storage");
objLoader.loadAsync(obj, (xhr: ProgressEvent) => {
console.log((xhr.loaded / xhr.total * 100) + "% loaded");
}).then((group: THREE.Group) => {
group.traverse((child: THREE.Object3D) => {
if (child instanceof THREE.Mesh) {
child.material = new THREE.MeshLambertMaterial({ color: color });
this._object3d.add(child);
}
localStorage.removeItem("obj");
const objectLoader = new THREE.ObjectLoader();
this._object3d = objectLoader.parse(JSON.parse(jsonString));
});
});
this._object3d = new THREE.Group();
const material = new THREE.MeshBasicMaterial({ color: color.getHex(), wireframe: true });
this._object3d.traverse((child: THREE.Object3D) => {
if (child instanceof THREE.Mesh) {
......
src/style.css
+ 0
− 1
View file @ 956681a2
......@@ -23,4 +23,3 @@ nav a {
text-decoration: none;
font-size: .82em;
}
tsconfig.json
+ 1
− 1
View file @ 956681a2
......@@ -14,7 +14,7 @@
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"skipLibCheck": true
"skipLibCheck": true,
},
"include": ["src"]
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment