Skip to content

Commit ff0ab5d

Browse files
author
marnec
committed
Merge branch 'main' of github.com:marnec/threeplot
2 parents 5f519a3 + 888cc68 commit ff0ab5d

13 files changed

Lines changed: 168 additions & 77 deletions

‎docs/index.1c70ff16.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/index.a21bd256.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/index.1c70ff16.js renamed to docs/index.b807d8eb.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.b807d8eb.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/axes.config.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { NamedAxis } from "./axes";
2-
import { AxesParams, AxisParams } from "./axes.params";
2+
import { AxesParams, AxisParams, GridParams } from "./axes.params";
33
import { LabelProperties } from "./label";
44
import { BaseConfig } from "./plots/base.config";
55

@@ -35,6 +35,22 @@ export class AxisConfig extends BaseConfig implements Required<AxisParams> {
3535
}
3636
}
3737

38+
export class GridConfig extends BaseConfig implements Required<GridParams> {
39+
xy: boolean;
40+
xz: boolean;
41+
yz: boolean;
42+
43+
constructor(params?: GridParams) {
44+
super();
45+
46+
const { xy, yz, xz } = params || {}
47+
48+
this.xy = this.defaultIfNullish(xy, true)
49+
this.xz = this.defaultIfNullish(xz, true)
50+
this.yz = this.defaultIfNullish(yz, true)
51+
}
52+
}
53+
3854
export const defaultAxisConfig = {
3955
x: {
4056
color: 0xff0000,

‎src/axes.params.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NamedAxis } from "./axes";
1+
import { NamedAxis, PlaneAxes } from "./axes";
22
import { LabelProperties } from "./label";
33

44
export type AxesParams = Partial<Record<keyof typeof NamedAxis, AxisParams | boolean>>;
@@ -9,4 +9,4 @@ export type AxisParams = {
99
width?: number;
1010
};
1111

12-
export type GridParams = {};
12+
export type GridParams = Partial<Record<keyof typeof PlaneAxes, boolean>>;

‎src/axes.ts‎

Lines changed: 43 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { GridHelper, Vector3 } from "three";
22
import { Line2 } from "three/examples/jsm/lines/Line2";
33
import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
44
import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
5-
import { AxesConfig, AxisConfig } from "./axes.config";
6-
import { AxesParams, AxisParams } from "./axes.params";
5+
import { AxesConfig, AxisConfig, GridConfig } from "./axes.config";
6+
import { AxesParams, AxisParams, GridParams } from "./axes.params";
77
import { Framed } from "./plot";
88
import { Label, LabelProperties } from "./label";
99

@@ -28,7 +28,12 @@ export const NamedAxis = {
2828
export class Axis extends Line2 {
2929
config: AxisConfig;
3030

31-
constructor(direction: Vector3, private length: number, params: AxisParams, public axisIdentifier: keyof typeof NamedAxis) {
31+
constructor(
32+
direction: Vector3,
33+
private length: number,
34+
params: AxisParams,
35+
public axisIdentifier: keyof typeof NamedAxis
36+
) {
3237
const points = [new Vector3(), direction.clone().multiplyScalar(length)];
3338

3439
const geometry = new LineGeometry();
@@ -51,17 +56,22 @@ export class Axis extends Line2 {
5156
}
5257

5358
export class Axes extends Framed {
54-
public gridXZ: GridHelper;
55-
public gridXY: GridHelper;
56-
public gridYZ: GridHelper;
57-
private config: AxesConfig;
58-
59-
constructor(private lengthX: number, private lengthY: number, private lengthZ: number, options?: AxesParams) {
59+
private axesConfig: AxesConfig;
60+
private gridsConfig: GridConfig;
61+
62+
constructor(
63+
private lengthX: number,
64+
private lengthY: number,
65+
private lengthZ: number,
66+
axesParams?: AxesParams,
67+
gridsParams?: GridParams
68+
) {
6069
super();
6170

62-
this.config = new AxesConfig(options);
71+
this.axesConfig = new AxesConfig(axesParams);
72+
this.gridsConfig = new GridConfig(gridsParams);
6373

64-
const { x, y, z } = this.config;
74+
const { x, y, z } = this.axesConfig;
6575

6676
if (x) {
6777
const xAxis = new Axis(NamedAxis.x.unit, lengthX * 1.1, x, NamedAxis.x.name);
@@ -83,18 +93,27 @@ export class Axes extends Framed {
8393
}
8494

8595
private setGrids() {
86-
this.gridXZ = new GridHelper(Math.max(this.lengthX, this.lengthZ));
87-
this.gridXZ.position.setX(this.lengthX / 2);
88-
this.gridXZ.position.setZ(this.lengthZ / 2);
89-
90-
this.gridXY = new GridHelper(Math.max(this.lengthX, this.lengthY));
91-
this.gridXY.position.setX(this.lengthX / 2);
92-
this.gridXY.position.setY(this.lengthY / 2);
93-
this.gridXY.rotateOnAxis(NamedAxis.x.unit, Math.PI / 2);
94-
95-
this.gridYZ = new GridHelper(Math.max(this.lengthY, this.lengthZ));
96-
this.gridYZ.position.setY(this.lengthY / 2);
97-
this.gridYZ.position.setZ(this.lengthZ / 2);
98-
this.gridYZ.rotateOnAxis(NamedAxis.z.unit, Math.PI / 2);
96+
if (this.gridsConfig.xz) {
97+
const gridXZ = new GridHelper(Math.max(this.lengthX, this.lengthZ));
98+
gridXZ.position.setX(this.lengthX / 2);
99+
gridXZ.position.setZ(this.lengthZ / 2);
100+
this.drawables.push(gridXZ);
101+
}
102+
103+
if (this.gridsConfig.xy) {
104+
const gridXY = new GridHelper(Math.max(this.lengthX, this.lengthY));
105+
gridXY.position.setX(this.lengthX / 2);
106+
gridXY.position.setY(this.lengthY / 2);
107+
gridXY.rotateOnAxis(NamedAxis.x.unit, Math.PI / 2);
108+
this.drawables.push(gridXY);
109+
}
110+
111+
if (this.gridsConfig.yz) {
112+
const gridYZ = new GridHelper(Math.max(this.lengthY, this.lengthZ));
113+
gridYZ.position.setY(this.lengthY / 2);
114+
gridYZ.position.setZ(this.lengthZ / 2);
115+
gridYZ.rotateOnAxis(NamedAxis.z.unit, Math.PI / 2);
116+
this.drawables.push(gridYZ);
117+
}
99118
}
100119
}

‎src/frame.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
33
import { Axes } from "./axes";
44
import { Frameable, Plot } from "./plot";
55
import { Label } from "./label";
6-
import { AxesParams } from "./axes.params";
6+
import { AxesParams, GridParams } from "./axes.params";
77

88
export class Frame extends Scene {
99
protected scene: Scene;
@@ -16,7 +16,12 @@ export class Frame extends Scene {
1616

1717
// TODO: at the moment only one size bc grid can only be squared
1818
// look into this for solution https://discourse.threejs.org/t/rectangular-gridhelper-possibility/37812
19-
constructor(protected canvas: HTMLCanvasElement, protected size = 10, axesParams?: AxesParams) {
19+
constructor(
20+
protected canvas: HTMLCanvasElement,
21+
protected size = 10,
22+
axesParams?: AxesParams,
23+
gridParams?: GridParams
24+
) {
2025
super();
2126
this.scene = new Scene();
2227
this.scene.background = new Color(0xffffff);
@@ -30,15 +35,15 @@ export class Frame extends Scene {
3035

3136
this.setCamera(clientWidth, clientHeight);
3237
this.setControls();
33-
this.setAxes(axesParams);
38+
this.setAxesAndGrids(axesParams, gridParams);
3439

3540
this.updateOnChanges();
3641
this.update();
3742
}
3843

3944
private setCamera(width: number, height: number) {
4045
this.camera = new PerspectiveCamera(45, width / height, 0.1, 1000);
41-
46+
4247
this.camera.position.set(this.size * 1.7, this.size * 1.5, this.size * 2.7);
4348
this.scene.add(this.camera);
4449
}
@@ -48,14 +53,9 @@ export class Frame extends Scene {
4853
this.controls.target.set(0, 0, 0);
4954
}
5055

51-
private setAxes(params?: AxesParams) {
52-
const axes = new Axes(this.size, this.size, this.size, params);
53-
56+
private setAxesAndGrids(params?: AxesParams, gridParams?: GridParams) {
57+
const axes = new Axes(this.size, this.size, this.size, params, gridParams);
5458
this.addFrameable(axes);
55-
56-
this.scene.add(axes.gridXY);
57-
this.scene.add(axes.gridXZ);
58-
this.scene.add(axes.gridYZ);
5959
}
6060

6161
updateOnChanges() {

‎test/e2e/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<h1>Playground</h1>
1414
<div class="grid">
1515
<div class="grid-item">
16-
<h3>Axes</h3>
16+
<h3>Axes and Grids</h3>
1717
<canvas id="canvas1"></canvas>
1818
</div>
1919
<div class="grid-item">

‎test/e2e/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const canvas4 = document.getElementById("canvas4") as HTMLCanvasElement;
99
const points = getRandomPoints(200);
1010
const scatterPlot = new ScatterPlot(points);
1111

12-
new Frame(canvas1, 10, { x: false, y: { width: 0.025, label: { text: Greek.betaSymbol } } });
12+
new Frame(canvas1, 10, { x: false, y: { width: 0.025, label: { text: Greek.betaSymbol } } }, { yz: false });
1313

1414
const frame2 = new Frame(canvas2, 10);
1515
frame2.addPlot(scatterPlot);
@@ -19,7 +19,7 @@ frame3.addLabel(
1919
new Label(new Vector3(3, 3, 3), { text: `${Greek.lowercaseAlpha}=1/2${Greek.lowercasePi}`, fontSize: 1 })
2020
);
2121

22-
const frame4 = new Frame(canvas4, 10);
22+
const frame4 = new Frame(canvas4, 10, {}, { xy: false, xz: false, yz: false });
2323
frame4.addPlot(
2424
new VectorPlot(new Vector3(0, 0, 0), new Vector3(7, 6.4, 4.6), {
2525
angle: { label: { text: Greek.uppercasePhi, anchorY: "top" } },

0 commit comments

Comments
 (0)