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

refactor!: wrapper classes with better structure

parent 78de2e31
Branches
No related tags found
1 merge request!1feat: base project
Show whitespace changes
Inline Side-by-side
Showing
with 277 additions and 269 deletions
index.html
+ 1
− 1
View file @ 454a72af
......@@ -8,7 +8,7 @@
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="index.html">Home</a>
<a href="pages/bezier.html">Bezier Curves</a>
......
pages/bezier.html
+ 1
− 1
View file @ 454a72af
......@@ -8,7 +8,7 @@
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
......
pages/example.html
+ 1
− 1
View file @ 454a72af
......@@ -8,7 +8,7 @@
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
......
pages/quaternion.html
+ 1
− 1
View file @ 454a72af
......@@ -8,7 +8,7 @@
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
......
pages/simulation.html
+ 1
− 1
View file @ 454a72af
......@@ -8,7 +8,7 @@
<title>Vite App</title>
</head>
<body>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="/src/Main.ts"></script>
<nav>
<a href="../index.html">Home</a>
<a href="bezier.html">Bezier Curves</a>
......
src/00-welcome-and-example/Example.ts
+ 12
− 6
View file @ 454a72af
import * as THREE from "three" ;
import { Line1d, Line2d } from "../core/Lines";
import { PipelineData } from "../core/Pipeline";
import { DebugHelper, Line1d, Line2d, Point2d, Point3d, Mesh } from "../core/Shapes";
import { Point2d, Point3d } from "../core/Points";
import { DebugHelper } from "../core/Shapes";
import { TriangleMesh } from "../core/TriangleMesh";
class Example extends PipelineData {
public constructor() { super(); }
......@@ -20,13 +23,16 @@ class Example extends PipelineData {
const point3d = new Point3d(.1, 32, new THREE.Color(0xffffff));
const line1d = new Line1d(pointsA, new THREE.Color(0xffffff));
const line2d = new Line2d(pointsB, .01, new THREE.Color(0xffffff));
const mesh = new Mesh("../assets/suzanne.obj", new THREE.Color(0xffffff));
const mesh = new TriangleMesh("../assets/suzanne.obj", new THREE.Color(0xffffff));
this.addObject(point2d, true);
this.addObject(point3d, true);
this.addObject(line1d), true; // gives a waring
this.addObject(point2d);
this.addObject(point3d);
this.addObject(line1d); // gives a waring
this.addObject(line2d);
this.addObject(mesh, true);
this.addObject(mesh);
this.addDraggable(point2d);
this.addDraggable(point3d);
const debugHelper = new DebugHelper();
this.observers.push(debugHelper);
......
src/00-welcome-and-example/demo.ts
+ 1
− 1
View file @ 454a72af
......@@ -6,7 +6,7 @@ class Demo extends PipelineData {
data(): void {
const spinningCube = new SpinningCube();
this.addObject(spinningCube, false);
this.addObject(spinningCube);
this.addObserver(spinningCube);
}
}
......
src/01-bezierCurves/Curve.ts
+ 5
− 3
View file @ 454a72af
import * as THREE from 'three';
import { Line2d, Point2d } from "../core/Shapes";
import { Line2d } from "../core/Lines";
import { PipelineObserver } from '../core/Pipeline';
import { Point2d } from '../core/Points';
import { CubicBezierCurve, DeCasteljauAlgorithm } from "./CubicBezierCurve";
interface CurveParameter {
......@@ -14,7 +16,7 @@ interface CurveParameter {
color: THREE.Color;
}
class Curve extends Line2d {
class Curve extends Line2d implements PipelineObserver {
public positions: Array<THREE.Vector3>;
......
src/01-bezierCurves/CurveHelper.ts
+ 2
− 1
View file @ 454a72af
import * as THREE from "three";
import { Curve } from "./Curve";
import { PipelineDraggable, PipelineGUI, PipelineObserver, PipelineRenderable } from "../core/Pipeline";
import { Line1d, Point2d } from "../core/Shapes";
import { Line1d } from "../core/Lines";
import { Point2d } from "../core/Points";
import { DeCasteljauAlgorithm, BernsteinAlgorithm } from "./CubicBezierCurve";
import dat from "dat.gui";
......
src/01-bezierCurves/DemoBezier.ts
+ 13
− 14
View file @ 454a72af
import * as THREE from 'three';
import { PipelineData } from "../core/Pipeline";
import { Point2d } from "../core/Shapes";
import { Point2d } from "../core/Points";
import { Curve } from './Curve';
import { CurveHelper, CurveHelperBernstein } from './CurveHelper';
......@@ -9,15 +9,18 @@ class BezierDemo extends PipelineData {
data(): void {
const pointA = new Point2d(.05, 36, new THREE.Color(0x00ff00));
const tangentA = new Point2d(.025, 36, new THREE.Color(0x00ff00));
const pointB = new Point2d(.05, 36, new THREE.Color(0xff0000));
const tangentB = new Point2d(.025, 36, new THREE.Color(0xff0000));
const pointA = new Point2d(.05, 36);
const tangentA = new Point2d(.025, 36);
const pointB = new Point2d(.05, 36);
const tangentB = new Point2d(.025, 36);
pointA.material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: false });;
tangentA.material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: false });;
pointB.material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: false });;
tangentB.material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: false });;
const solidGreenMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const solidRedMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
pointA.material = solidGreenMaterial;
tangentA.material = solidGreenMaterial;
pointB.material = solidRedMaterial;
tangentB.material = solidRedMaterial;
const curve = new Curve({
pointA: pointA,
......@@ -43,6 +46,7 @@ class BezierDemo extends PipelineData {
this.addObserver(curveHelper);
this.addObserver(curveHelperBernstein);
this.addGUI(curve);
this.addGUI(curveHelper);
this.addObject(pointA);
......@@ -54,11 +58,6 @@ class BezierDemo extends PipelineData {
this.addDraggable(tangentA);
this.addDraggable(pointB);
this.addDraggable(tangentB);
this.addObserver(pointA);
this.addObserver(tangentA);
this.addObserver(pointB);
this.addObserver(tangentB);
}
}
......
src/02-quaternion/Axes.ts
+ 1
− 1
View file @ 454a72af
import * as THREE from 'three';
import { PipelineRenderable } from '../core/Pipeline';
import { Line1d } from "../core/Shapes";
import { Line1d } from "../core/Lines";
class Axes implements PipelineRenderable {
public x: Line1d;
......
src/02-quaternion/DemoQuaternion.ts
+ 3
− 4
View file @ 454a72af
import * as THREE from 'three';
import { PipelineData } from "../core/Pipeline";
import { Mesh } from "../core/Shapes";
import { TriangleMesh } from "../core/TriangleMesh";
import { Axes } from './Axes';
import { Rotator } from './Rotator';
......@@ -22,9 +22,8 @@ class QuaternionDemo extends PipelineData {
const axes = new Axes(5);
this.addObject(axes);
const material = new THREE.MeshLambertMaterial({ color: 0xffffff });
const rotationObject: Mesh = new Mesh("../../assets/suzanne.obj", new THREE.Color(0xffffff));
rotationObject.material = material;
const rotationObject = new TriangleMesh("../../assets/suzanne.obj", new THREE.Color(0xffffff));
rotationObject.material = new THREE.MeshLambertMaterial({ color: 0xffffff });
this.addObject(rotationObject);
const rotator: Rotator = new Rotator(rotationObject.object());
......
src/core/Lines.ts 0 → 100644
+ 91
− 0
View file @ 454a72af
import * as THREE from "three";
import { Shape } from "./Shapes";
import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
import { PipelineGUI } from "./Pipeline";
import { GUI } from "dat.gui";
abstract class Line extends Shape {
protected _points: Array<THREE.Vector3>;
protected _color: THREE.Color;
constructor(points: Array<THREE.Vector3>, color: THREE.Color,
geometry: THREE.BufferGeometry, material: LineMaterial | THREE.LineBasicMaterial) {
super();
this._points = points;
this._color = color;
if (this instanceof Line2d) {
this._object3d = new THREE.Mesh(geometry, material);
} else {
this._object3d = new THREE.Line(geometry, material);
}
}
protected abstract _createLine(): void;
public set points(points: Array<THREE.Vector3>) {
if (this._points.length !== points.length) {
this._points = points;
this._createLine();
} else {
this._points = points;
(this._object3d as THREE.Line).geometry.setFromPoints(points);
}
}
protected static pointsToBuffer(points: Array<THREE.Vector3>): Array<number> {
if (points.length < 1) {
return [];
}
return points.reduce((acc, cur) => {
acc.push(cur.x, cur.y, cur.z);
return acc;}
, new Array<number>());
}
}
class Line1d extends Line {
constructor(points: Array<THREE.Vector3>, color: THREE.Color = new THREE.Color(0xffffff)) {
super(points, color, new THREE.BufferGeometry().setFromPoints(points),
new THREE.LineBasicMaterial({ color: color.getHex(), linewidth: .1 }));
}
protected _createLine(): void {
(this._object3d as THREE.Line).geometry.dispose();
(this._object3d as THREE.Line).geometry = new THREE.BufferGeometry().setFromPoints(this._points);
}
}
class Line2d extends Line implements PipelineGUI {
private _lineWidth: number;
constructor(points: Array<THREE.Vector3>, linewidth: number, color: THREE.Color = new THREE.Color(0xffffff)) {
super(points, color, new LineGeometry().setFromPoints(points),
new LineMaterial({ color: color.getHex(), linewidth: linewidth }));
this._lineWidth = linewidth;
}
public get lineWidth(): number {
return this._lineWidth;
}
public set lineWidth(linewidth: number) {
this._lineWidth = linewidth;
((this._object3d as THREE.Mesh).material as LineMaterial).linewidth = linewidth;
}
protected _createLine(): void {
(this._object3d as THREE.Line).geometry.dispose();
(this._object3d as THREE.Line).geometry = new LineGeometry().setPositions(Line.pointsToBuffer(this._points));
}
gui(gui: GUI): void {
const folder = gui.addFolder("Line2d");
folder.add(this, "lineWidth", 0, .2, .001).name("Line Width");
}
}
export { Line, Line1d, Line2d };
\ No newline at end of file
src/core/Points.ts 0 → 100644
+ 62
− 0
View file @ 454a72af
import * as THREE from "three";
import { PipelineDraggable } from "./Pipeline";
import { Shape } from "./Shapes";
abstract class Point extends Shape implements PipelineDraggable {
protected _radius: number;
protected _resolution: number;
constructor(radius: number, resolution: number, geometry: THREE.BufferGeometry,
material: THREE.MeshBasicMaterial | THREE.MeshLambertMaterial) {
super();
this._radius = radius;
this._resolution = resolution;
this._object3d = new THREE.Mesh(geometry, material);
}
protected abstract _createMesh(): void;
public set radius(radius: number) {
this._radius = radius;
this._createMesh();
}
public set resolution(resolution: number) {
this._resolution = resolution;
this._createMesh();
}
hitbox(): THREE.Object3D<THREE.Event> {
return this._object3d;
}
}
class Point2d extends Point {
constructor(radius: number, resolution: number, color: THREE.Color = new THREE.Color(0xffffff)) {
super(radius, resolution, new THREE.CircleBufferGeometry(radius, resolution),
new THREE.MeshBasicMaterial({ color: color.getHex(), wireframe: true }));
}
protected _createMesh(): void {
(this._object3d as THREE.Mesh).geometry.dispose();
(this._object3d as THREE.Mesh).geometry = new THREE.CircleBufferGeometry(this._radius, this._resolution);
}
}
class Point3d extends Point {
constructor(radius: number, resolution: number, color: THREE.Color = new THREE.Color(0xffffff)) {
super(radius, resolution, new THREE.SphereBufferGeometry(radius, resolution, resolution / 2),
new THREE.MeshBasicMaterial({ color: color.getHex(), wireframe: true }));
}
protected _createMesh(): void {
(this._object3d as THREE.Mesh).geometry.dispose();
(this._object3d as THREE.Mesh).geometry = new THREE.SphereBufferGeometry(this._radius, this._resolution,
this._resolution / 2);
}
}
export { Point, Point2d, Point3d };
\ No newline at end of file
src/core/Shapes.ts
+ 26
− 234
View file @ 454a72af
import * as THREE from "three";
import { PipelineDraggable, PipelineObserver, PipelineRenderable } from "./Pipeline";
import { PipelineObserver, PipelineRenderable } from "./Pipeline";
import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
abstract class Shape implements PipelineObserver, PipelineRenderable {
abstract class Shape implements PipelineRenderable {
/**
* Any class that extends Shape must initialize this field.
......@@ -14,113 +11,38 @@ abstract class Shape implements PipelineObserver, PipelineRenderable {
*/
public _object3d!: THREE.Object3D;
public object(): THREE.Object3D {
return this._object3d!;
}
public position(): THREE.Vector3 {
return this._object3d.position;
}
update(_deltaTime: number): void {/* INTENTIONAL */ }
}
abstract class Point extends Shape implements PipelineDraggable {
private _geometry: THREE.BufferGeometry;
private _material: THREE.MeshBasicMaterial | THREE.MeshLambertMaterial;
protected _radius: number;
protected _resolution: number;
protected _color: THREE.Color;
constructor(radius: number, resolution: number, color: THREE.Color, geometry: THREE.BufferGeometry,
material: THREE.MeshBasicMaterial | THREE.MeshLambertMaterial) {
super();
this._radius = radius;
this._resolution = resolution;
this._color = color;
this._geometry = geometry;
this._material = material
this._object3d = new THREE.Mesh(this._geometry, this._material);
}
protected abstract _createMesh(): void;
public set radius(radius: number) {
this._radius = radius;
this._createMesh();
}
public set resolution(resolution: number) {
this._resolution = resolution;
this._createMesh();
}
public set color(color: THREE.Color) {
this._color = color;
this._material.color = color;
if (this._object3d instanceof THREE.Mesh) {
const mr = (this._object3d as THREE.Mesh).material;
if (mr instanceof THREE.MeshBasicMaterial) {
(mr as THREE.MeshBasicMaterial).color.set(color.getHex());
} else if (mr instanceof THREE.MeshLambertMaterial) {
(mr as THREE.MeshLambertMaterial).color.set(color.getHex());
}
public set material(material: THREE.MeshBasicMaterial | THREE.MeshLambertMaterial) {
this._material = material.clone();
this._material.color = this._color;
(this._object3d as THREE.Mesh).material = material;
} else if (this._object3d instanceof THREE.Line) {
const mr = (this._object3d as THREE.Line).material;
if (mr instanceof LineMaterial) {
(mr as LineMaterial).color.set(color.getHex());
} else if (mr instanceof THREE.LineBasicMaterial) {
(mr as THREE.LineBasicMaterial).color.set(color.getHex());
}
hitbox(): THREE.Object3D<THREE.Event> {
return this._object3d;
}
}
abstract class Line extends Shape {
protected _geometry: THREE.BufferGeometry;
protected _material: LineMaterial | THREE.LineBasicMaterial;
protected _points: Array<THREE.Vector3>;
protected _color: THREE.Color;
constructor(points: Array<THREE.Vector3>, color: THREE.Color,
geometry: THREE.BufferGeometry, material: LineMaterial | THREE.LineBasicMaterial) {
super();
this._points = points;
this._color = color;
this._geometry = geometry;
this._material = material;
if (this._material instanceof LineMaterial) {
this._object3d = new THREE.Mesh(this._geometry, this._material);
} else {
this._object3d = new THREE.Line(this._geometry, this._material);
}
}
protected abstract _createLine(): void;
public set points(points: Array<THREE.Vector3>) {
if (this._points.length !== points.length) {
this._points = points;
this._createLine();
} else {
this._points = points;
this._geometry.setFromPoints(points);
public set material(material: THREE.Material) {
if (this._object3d instanceof THREE.Mesh) {
(this._object3d as THREE.Mesh).material = material;
} else if (this._object3d instanceof THREE.Line) {
(this._object3d as THREE.Line).material = material;
}
}
public set color(color: THREE.Color) {
this._color = color;
this._material.color = color;
public object(): THREE.Object3D {
return this._object3d!;
}
public set material(material: LineMaterial | THREE.LineBasicMaterial) {
this._material = material.clone();
this._material.color = this._color;
(this._object3d as THREE.Line).material = material;
public position(): THREE.Vector3 {
return this._object3d.position;
}
}
......@@ -152,134 +74,4 @@ class DebugHelper implements PipelineObserver {
}
}
class Point2d extends Point {
constructor(radius: number, resolution: number, color: THREE.Color) {
super(radius, resolution, color, new THREE.CircleBufferGeometry(radius, resolution),
new THREE.MeshBasicMaterial({ color: color.getHex(), wireframe: true }));
}
protected _createMesh(): void {
(this._object3d as THREE.Mesh).geometry.dispose();
(this._object3d as THREE.Mesh).geometry = new THREE.CircleBufferGeometry(this._radius, this._resolution);
}
}
class Point3d extends Point {
constructor(radius: number, resolution: number, color: THREE.Color) {
super(radius, resolution, color, new THREE.SphereBufferGeometry(radius, resolution, resolution / 2),
new THREE.MeshBasicMaterial({ color: color.getHex(), wireframe: true }));
}
protected _createMesh(): void {
(this._object3d as THREE.Mesh).geometry.dispose();
(this._object3d as THREE.Mesh).geometry = new THREE.SphereBufferGeometry(this._radius, this._resolution,
this._resolution / 2);
}
}
function pointsToBuffer(points: Array<THREE.Vector3>): LineGeometry {
if (points.length < 1) {
return new LineGeometry();
}
return new LineGeometry().setPositions(points.reduce((acc, cur) => {
acc.push(cur.x, cur.y, cur.z);
return acc;}
, new Array<number>()));
}
class Line1d extends Line {
constructor(points: Array<THREE.Vector3>, color: THREE.Color) {
super(points, color, new THREE.BufferGeometry().setFromPoints(points),
new THREE.LineBasicMaterial({ color: color.getHex(), linewidth: .1 }));
}
protected _createLine(): void {
(this._object3d as THREE.Line).geometry.dispose();
(this._object3d as THREE.Line).geometry = new THREE.BufferGeometry().setFromPoints(this._points);
}
}
class Line2d extends Line {
protected _linewidth: number;
constructor(points: Array<THREE.Vector3>, linewidth: number, color: THREE.Color) {
super(points, color, pointsToBuffer(points),
new LineMaterial({ color: color.getHex(), linewidth: linewidth }));
this._linewidth = linewidth;
}
protected _createLine(): void {
(this._object3d as THREE.Line).geometry.dispose();
(this._object3d as THREE.Line).geometry = pointsToBuffer(this._points);
}
public set linewidth(linewidth: number) {
this._linewidth = linewidth;
this._material.linewidth = linewidth;
}
public set material(material: LineMaterial) {
this._material = material;
this._material.color = this._color;
this._material.linewidth = this._linewidth;
(this._object3d as THREE.Line).material = material;
}
}
class Mesh extends Shape implements PipelineDraggable {
protected _material: THREE.MeshBasicMaterial | THREE.MeshLambertMaterial;
protected _color: THREE.Color;
constructor(obj: string, color: THREE.Color) {
super();
this._material = new THREE.MeshBasicMaterial({ color: color.getHex(), wireframe: true });
this._color = color;
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");
}
localStorage.removeItem("obj");
const objectLoader = new THREE.ObjectLoader();
this._object3d = objectLoader.parse(JSON.parse(jsonString));
this._object3d.traverse((child: THREE.Object3D) => {
if (child instanceof THREE.Mesh) {
child.material = this._material;
}
});
}
public set color(color: THREE.Color) {
this._color = color;
this._material.color = color;
}
public set material(material: THREE.MeshBasicMaterial | THREE.MeshLambertMaterial) {
this._material = material;
(this._object3d as THREE.Group).traverse((child: THREE.Object3D) => {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
}
hitbox(): THREE.Object3D<THREE.Event> {
return this._object3d;
}
}
export { Shape, DebugHelper, Point, Point2d, Point3d, Line, Line1d, Line2d, Mesh };
\ No newline at end of file
export { Shape, DebugHelper };
\ No newline at end of file
src/core/TriangleMesh.ts 0 → 100644
+ 56
− 0
View file @ 454a72af
import * as THREE from "three";
import { PipelineDraggable } from "./Pipeline";
import { Shape } from "./Shapes";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
class TriangleMesh extends Shape implements PipelineDraggable {
constructor(obj: string, color: THREE.Color) {
super();
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");
}
localStorage.removeItem("obj");
const objectLoader = new THREE.ObjectLoader();
this._object3d = objectLoader.parse(JSON.parse(jsonString));
const material = new THREE.MeshBasicMaterial({ color: color.getHex(), wireframe: true });
this._object3d.traverse((child: THREE.Object3D) => {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
}
public set color(color: THREE.Color) {
this._object3d.traverse((child: THREE.Object3D) => {
if (child instanceof THREE.Mesh) {
child.material.color.set(color.getHex());
}
});
}
public set material(material: THREE.MeshBasicMaterial | THREE.MeshLambertMaterial) {
this._object3d.traverse((child: THREE.Object3D) => {
if (child instanceof THREE.Mesh) {
child.material = material;
}
});
}
hitbox(): THREE.Object3D<THREE.Event> {
return this._object3d;
}
}
export {TriangleMesh};
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment