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 11 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
5 changes: 2 additions & 3 deletions packages/base/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,12 +60,11 @@
"@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": {
Expand Down
3 changes: 1 addition & 2 deletions packages/base/src/3dview/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
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
48 changes: 28 additions & 20 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 @@ -478,7 +479,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 +503,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 +682,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 @@ -886,10 +884,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 +914,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 +1257,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
22 changes: 11 additions & 11 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -923,8 +923,8 @@ __metadata:
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 @@ -11945,19 +11945,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