Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update ThreeJS #418

Merged
merged 16 commits into from
Sep 30, 2024
Merged

Update ThreeJS #418

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
1873ff5
Bump `ThreeJs` to latest version
arjxn-py Sep 15, 2024
cf9fb51
Also bump `three-mesh-bvh` to latest
arjxn-py Sep 15, 2024
52caaf9
Merge branch 'main' into update-threejs
arjxn-py Sep 16, 2024
1bd0c46
Remove Redundant plane rendering
arjxn-py Sep 23, 2024
1354997
Merge branch 'main' into update-threejs
arjxn-py Sep 25, 2024
3161760
Bring back clip plane
arjxn-py Sep 25, 2024
1b01646
Show `_clippingPlaneMesh` only if clipping is enabled
arjxn-py Sep 26, 2024
f8cc8c3
Complement logic
arjxn-py Sep 26, 2024
a8ffb20
Plane thing fixed
arjxn-py Sep 26, 2024
73cb1ef
Remove some `@ts-ignore` statements
arjxn-py Sep 26, 2024
d14a1c1
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Sep 26, 2024
883b765
Bump & Add back `types/three`
arjxn-py Sep 26, 2024
7c0c029
Fix typing failures
arjxn-py Sep 27, 2024
b1c311a
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Sep 27, 2024
0357b48
Update Playwright Snapshots
github-actions[bot] Sep 30, 2024
54aca58
Merge branch 'main' into update-threejs
arjxn-py Sep 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions packages/base/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,18 +60,17 @@
"@naisutech/react-tree": "^3.0.1",
"@rjsf/core": "^4.2.0",
"@types/d3-color": "^3.1.0",
"@types/three": "^0.134.0",
arjxn-py marked this conversation as resolved.
Show resolved Hide resolved
"d3-color": "^3.1.0",
"react": "^18.0.1",
"styled-components": "^5.3.6",
"three": "^0.135.0",
"three-mesh-bvh": "^0.5.17",
"three": "^0.168.0",
"three-mesh-bvh": "^0.7.8",
"uuid": "^8.3.2"
},
"devDependencies": {
"@apidevtools/json-schema-ref-parser": "^9.0.9",
"@types/node": "^18.15.11",
"@types/three": "^0.135.0",
"@types/three": "^0.168.0",
"rimraf": "^3.0.2",
"typescript": "^5"
},
Expand Down
5 changes: 2 additions & 3 deletions packages/base/src/3dview/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const SELECTED_MESH_COLOR = new THREE.Color(

export type BasicMesh = THREE.Mesh<
THREE.BufferGeometry,
THREE.MeshBasicMaterial
THREE.MeshBasicMaterial | THREE.MeshPhongMaterial
>;

/**
Expand Down Expand Up @@ -230,8 +230,7 @@ export function buildShape(options: {
for (const edge of edgeList) {
const edgeMaterial = new LineMaterial({
linewidth: DEFAULT_LINEWIDTH,
// @ts-ignore Missing typing in ThreeJS
color: DEFAULT_EDGE_COLOR,
color: new THREE.Color(DEFAULT_EDGE_COLOR).getHex(),
clippingPlanes,
// Depth offset so that lines are most always on top of faces
polygonOffset: true,
Expand Down
61 changes: 38 additions & 23 deletions packages/base/src/3dview/mainview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@ interface IStates {
wireframe: boolean;
}

interface ILineIntersection extends THREE.Intersection {
pointOnLine?: THREE.Vector3;
}

export class MainView extends React.Component<IProps, IStates> {
constructor(props: IProps) {
super(props);
Expand Down Expand Up @@ -94,11 +98,7 @@ export class MainView extends React.Component<IProps, IStates> {
this._mainViewModel.renderSignal.connect(this._requestRender, this);
this._mainViewModel.workerBusy.connect(this._workerBusyHandler, this);

// @ts-ignore Missing ThreeJS typing
this._raycaster.params.Line2 = {};
// Is this threshold in pixels? It looks like it
// @ts-ignore Missing ThreeJS typing
this._raycaster.params.Line2.threshold = 50;
this._raycaster.params.Line = { threshold: 50 };

this.state = {
id: this._mainViewModel.id,
Expand Down Expand Up @@ -218,7 +218,8 @@ export class MainView extends React.Component<IProps, IStates> {

this._renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
antialias: true,
stencil: true
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Neat

});
// this._renderer.setPixelRatio(window.devicePixelRatio);
this._renderer.setClearColor(0x000000, 0);
Expand Down Expand Up @@ -286,7 +287,11 @@ export class MainView extends React.Component<IProps, IStates> {
this._model.syncCamera(
{
position: this._camera.position.toArray([]),
rotation: this._camera.rotation.toArray([]),
rotation: [
this._camera.rotation.x,
this._camera.rotation.y,
this._camera.rotation.z
],
up: this._camera.up.toArray([])
},
this._mainViewModel.id
Expand Down Expand Up @@ -381,10 +386,10 @@ export class MainView extends React.Component<IProps, IStates> {
this.divRef.current.clientHeight,
false
);
if (this._camera.type === 'PerspectiveCamera') {
if (this._camera instanceof THREE.PerspectiveCamera) {
this._camera.aspect =
this.divRef.current.clientWidth / this.divRef.current.clientHeight;
} else {
} else if (this._camera instanceof THREE.OrthographicCamera) {
this._camera.left = this.divRef.current.clientWidth / -2;
this._camera.right = this.divRef.current.clientWidth / 2;
this._camera.top = this.divRef.current.clientHeight / 2;
Expand Down Expand Up @@ -478,7 +483,7 @@ export class MainView extends React.Component<IProps, IStates> {

if (intersects.length > 0) {
// Find the first intersection with a visible object
for (const intersect of intersects) {
for (const intersect of intersects as ILineIntersection[]) {
// Object is hidden
if (!intersect.object.visible || !intersect.object.parent?.visible) {
continue;
Expand All @@ -502,11 +507,7 @@ export class MainView extends React.Component<IProps, IStates> {
: intersect.object;
return {
mesh: intersectMesh as BasicMesh,
// @ts-ignore Missing threejs typing
position: intersect.pointOnLine
? // @ts-ignore Missing threejs typing
intersect.pointOnLine
: intersect.point
position: intersect.pointOnLine ?? intersect.point
};
}
}
Expand Down Expand Up @@ -685,6 +686,7 @@ export class MainView extends React.Component<IProps, IStates> {
wireframe: this.state.wireframe
});
this._clippingPlaneMesh = new THREE.Mesh(planeGeom, planeMat);
this._clippingPlaneMesh.visible = this._clipSettings.enabled;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need this now that we set stencil: true on the renderer?

I'm fine letting this here though, it does sound sensible to not render the plane in anyway when the clipping is disabled.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

^^ Just a question, not a blocker

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we still need this now that we set stencil: true on the renderer?

Yes, it's necessary to be there as it avoids the clip plane mesh from rendering itself fully and renders only the part of the plane which intersect with the geometry.

It avoids this from happening:

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok then let's keep it! I'm unsure what changed in ThreeJS that requires this change, but the code looks more sensible now so that's good I guess

this._clippingPlaneMesh.onAfterRender = renderer => {
renderer.clearStencil();
};
Expand Down Expand Up @@ -823,6 +825,9 @@ export class MainView extends React.Component<IProps, IStates> {
pos.postShape = exported as any;
resolve();
},
() => {
// Intentionally empty: no error handling needed for this case
}, // Empty function to handle errors
options
);
});
Expand Down Expand Up @@ -886,10 +891,12 @@ export class MainView extends React.Component<IProps, IStates> {
if (selectedMesh.material?.color) {
selectedMesh.material.color = originalColor;
}
// @ts-ignore
if (selectedMesh.material?.linewidth) {
// @ts-ignore
selectedMesh.material.linewidth = DEFAULT_LINEWIDTH;

const material = selectedMesh.material as THREE.Material & {
linewidth?: number;
};
if (material?.linewidth) {
material.linewidth = DEFAULT_LINEWIDTH;
}
}

Expand All @@ -914,10 +921,12 @@ export class MainView extends React.Component<IProps, IStates> {
if (selectedMesh?.material?.color) {
selectedMesh.material.color = SELECTED_MESH_COLOR;
}
// @ts-ignore
if (selectedMesh?.material?.linewidth) {
// @ts-ignore
selectedMesh.material.linewidth = SELECTED_LINEWIDTH;

const material = selectedMesh.material as THREE.Material & {
linewidth?: number;
};
if (material?.linewidth) {
material.linewidth = SELECTED_LINEWIDTH;
}
}
}
Expand Down Expand Up @@ -1255,11 +1264,17 @@ export class MainView extends React.Component<IProps, IStates> {
this._transformControls.enabled = true;
this._transformControls.visible = true;
this._clippingPlaneMeshControl.visible = this._clipSettings.showClipPlane;
if (this._clippingPlaneMesh) {
this._clippingPlaneMesh.visible = true;
}
} else {
this._renderer.localClippingEnabled = false;
this._transformControls.enabled = false;
this._transformControls.visible = false;
this._clippingPlaneMeshControl.visible = false;
if (this._clippingPlaneMesh) {
this._clippingPlaneMesh.visible = false;
}
}
}

Expand Down
81 changes: 65 additions & 16 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -918,13 +918,13 @@ __metadata:
"@rjsf/core": ^4.2.0
"@types/d3-color": ^3.1.0
"@types/node": ^18.15.11
"@types/three": ^0.135.0
"@types/three": ^0.168.0
d3-color: ^3.1.0
react: ^18.0.1
rimraf: ^3.0.2
styled-components: ^5.3.6
three: ^0.135.0
three-mesh-bvh: ^0.5.17
three: ^0.168.0
three-mesh-bvh: ^0.7.8
typescript: ^5
uuid: ^8.3.2
languageName: unknown
Expand Down Expand Up @@ -3563,6 +3563,13 @@ __metadata:
languageName: node
linkType: hard

"@tweenjs/tween.js@npm:~23.1.3":
version: 23.1.3
resolution: "@tweenjs/tween.js@npm:23.1.3"
checksum: 2f8a908b275bb6729bde4b863c277bf7411d2e0302ceb0455369479077b89eaf8380cd9206b91ff574416418a95c6f06db4e1ddea732a286d0db0ba8e7c093d3
languageName: node
linkType: hard

"@types/create-react-class@npm:*":
version: 15.6.8
resolution: "@types/create-react-class@npm:15.6.8"
Expand Down Expand Up @@ -3712,10 +3719,24 @@ __metadata:
languageName: node
linkType: hard

"@types/three@npm:^0.135.0":
version: 0.135.0
resolution: "@types/three@npm:0.135.0"
checksum: 85977e55cc3d7a14be88816a50bcec4eb0f141876d3cdc6dd7870f72122605af87462d7583e950cd0ee6ab21949b8c1b8304a88174d536648deb8ef97968fa1b
"@types/stats.js@npm:*":
version: 0.17.3
resolution: "@types/stats.js@npm:0.17.3"
checksum: 4f84a012f630532877f62959b6335d3fa081ccaac15ce3f1f916741db265bda22b9c927d7efc9cc3389ffd60919a370673cb0b4e7221d580c571031e94b689fd
languageName: node
linkType: hard

"@types/three@npm:^0.168.0":
version: 0.168.0
resolution: "@types/three@npm:0.168.0"
dependencies:
"@tweenjs/tween.js": ~23.1.3
"@types/stats.js": "*"
"@types/webxr": "*"
"@webgpu/types": "*"
fflate: ~0.8.2
meshoptimizer: ~0.18.1
checksum: 2f4e36689170617ec8b8b085d20257adc5c69278265c040836e5cf4d336fa055fcec3a91d5e0de760abfb38953aee74e874fd1682bb61e31787514425eaa5182
languageName: node
linkType: hard

Expand All @@ -3730,6 +3751,13 @@ __metadata:
languageName: node
linkType: hard

"@types/webxr@npm:*":
version: 0.5.20
resolution: "@types/webxr@npm:0.5.20"
checksum: 8085c291ca8a8adfe03245725384234e62d61cc0f5f7b9985c2a0ba2b2a794cac538861c4904d8fcd28e3e381f0a4ecc5d4514d143dbf3fc0cf3193dc1cc7a54
languageName: node
linkType: hard

"@typescript-eslint/eslint-plugin@npm:5.55.0":
version: 5.55.0
resolution: "@typescript-eslint/eslint-plugin@npm:5.55.0"
Expand Down Expand Up @@ -4002,6 +4030,13 @@ __metadata:
languageName: node
linkType: hard

"@webgpu/types@npm:*":
version: 0.1.46
resolution: "@webgpu/types@npm:0.1.46"
checksum: 8dd5fb8a5993e83cb910c6d7bd7d47b941f631b47a77f1280740b245556be615cc84a87de65dceea07aa6629e4bd392b4b6c53e238514958f985f3f5e999db1a
languageName: node
linkType: hard

"@webpack-cli/configtest@npm:^2.1.1":
version: 2.1.1
resolution: "@webpack-cli/configtest@npm:2.1.1"
Expand Down Expand Up @@ -6400,6 +6435,13 @@ __metadata:
languageName: node
linkType: hard

"fflate@npm:~0.8.2":
version: 0.8.2
resolution: "fflate@npm:0.8.2"
checksum: 29470337b85d3831826758e78f370e15cda3169c5cd4477c9b5eea2402261a74b2975bae816afabe1c15d21d98591e0d30a574f7103aa117bff60756fa3035d4
languageName: node
linkType: hard

"figures@npm:3.2.0, figures@npm:^3.0.0":
version: 3.2.0
resolution: "figures@npm:3.2.0"
Expand Down Expand Up @@ -8815,6 +8857,13 @@ __metadata:
languageName: node
linkType: hard

"meshoptimizer@npm:~0.18.1":
version: 0.18.1
resolution: "meshoptimizer@npm:0.18.1"
checksum: 101dbed8abd4cf167cdb7a0bc13db90dd0743332c689e43b18cc5254d238f0766750752432401fa63dc7e9e32399ef68daacf48f0d89db1484042c1761c7362d
languageName: node
linkType: hard

"micromatch@npm:^4.0.0, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
version: 4.0.8
resolution: "micromatch@npm:4.0.8"
Expand Down Expand Up @@ -11945,19 +11994,19 @@ __metadata:
languageName: node
linkType: hard

"three-mesh-bvh@npm:^0.5.17":
version: 0.5.24
resolution: "three-mesh-bvh@npm:0.5.24"
"three-mesh-bvh@npm:^0.7.8":
version: 0.7.8
resolution: "three-mesh-bvh@npm:0.7.8"
peerDependencies:
three: ">= 0.123.0"
checksum: 5a5e356111756869cfd00870bca2d881d3019b55e71142b5eee544a2e6bcc3546a340b0defa29c3ebe7ed4cfe99e7ee6addd5671bb89852841107189c0f98157
three: ">= 0.151.0"
checksum: 3023a7d1ccdf033e08eba5c6437b4c3dd31a6ec83cb54cfadfca2d6aa22c74c7895c5b0d6e943897ac411a64b86d9bf78b3f6c3a902efd8b8bfd3cf0afd9a18e
languageName: node
linkType: hard

"three@npm:^0.135.0":
version: 0.135.0
resolution: "three@npm:0.135.0"
checksum: bd7e195932587a5be0c887947adf2b3898c6fa71722800432562aed10beddb2f448d0f237d937824805eebf90e625fc22ed57054618121f47811a8e82b528507
"three@npm:^0.168.0":
version: 0.168.0
resolution: "three@npm:0.168.0"
checksum: 1f186006ad5c8df348d4a2bcdccc078f0454f196b8ccc450d405cdf8c88436ff773e545725ef1122891b5552b5cf03add8394288b58985a0c3ebe66b588cab2f
languageName: node
linkType: hard

Expand Down
Loading