Skip to content

Commit 2c4e73b

Browse files
brentyibrentyi
committed
Clean up scene node types, fix uncovered bugs
1 parent eed8b09 commit 2c4e73b

File tree

7 files changed

+50
-39
lines changed

7 files changed

+50
-39
lines changed

‎viser/client/build/asset-manifest.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"files": {
33
"main.css": "/static/css/main.82973013.css",
4-
"main.js": "/static/js/main.3b78e278.js",
4+
"main.js": "/static/js/main.831fea1f.js",
55
"index.html": "/index.html",
66
"main.82973013.css.map": "/static/css/main.82973013.css.map",
7-
"main.3b78e278.js.map": "/static/js/main.3b78e278.js.map"
7+
"main.831fea1f.js.map": "/static/js/main.831fea1f.js.map"
88
},
99
"entrypoints": [
1010
"static/css/main.82973013.css",
11-
"static/js/main.3b78e278.js"
11+
"static/js/main.831fea1f.js"
1212
]
1313
}

‎viser/client/build/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.3b78e278.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.svg"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>Viser</title><script defer="defer" src="/static/js/main.831fea1f.js"></script><link href="/static/css/main.82973013.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

viser/client/build/static/js/main.3b78e278.js renamed to viser/client/build/static/js/main.831fea1f.js

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

viser/client/build/static/js/main.3b78e278.js.LICENSE.txt renamed to viser/client/build/static/js/main.831fea1f.js.LICENSE.txt

File renamed without changes.

viser/client/build/static/js/main.3b78e278.js.map renamed to viser/client/build/static/js/main.831fea1f.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.

‎viser/client/src/SceneTree.tsx‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,19 @@ import { immerable } from "immer";
88
import { create } from "zustand";
99
import { immer } from "zustand/middleware/immer";
1010

11-
// The covariance/contravariance rules are too complicated here, so we just
12-
// type the reference with any.
13-
export type MakeObject = (ref: React.RefObject<any>) => React.ReactNode;
11+
export type MakeObject<T extends THREE.Object3D = THREE.Object3D> = (
12+
ref: React.RefObject<T>
13+
) => React.ReactNode;
1414

1515
/** Scenes will consist of nodes, which form a tree. */
16-
export class SceneNode {
16+
export class SceneNode<T extends THREE.Object3D = THREE.Object3D> {
1717
[immerable] = true;
1818

1919
public children: string[];
2020

2121
constructor(
2222
public name: string,
23-
public makeObject: MakeObject,
23+
public makeObject: MakeObject<T>,
2424
public cleanup?: () => void
2525
) {
2626
this.children = [];
@@ -47,18 +47,27 @@ export interface SceneTreeActions extends SceneTreeState {
4747

4848
// Create default scene tree state.
4949
// By default, the y-axis is up. Let's rotate everything so Z is up instead.
50-
const makeRoot: MakeObject = (ref) => (
50+
const makeRoot: MakeObject<THREE.Group> = (ref) => (
5151
<group
5252
ref={ref}
5353
quaternion={new THREE.Quaternion().setFromEuler(
5454
new THREE.Euler(-Math.PI / 2.0, 0.0, 0.0)
5555
)}
5656
/>
5757
);
58-
const rootAxesTemplate: MakeObject = (ref) => <CoordinateFrame ref={ref} />;
58+
const rootAxesTemplate: MakeObject<THREE.Group> = (ref) => (
59+
<CoordinateFrame ref={ref} />
60+
);
61+
62+
const rootNodeTemplate = new SceneNode(
63+
"",
64+
makeRoot
65+
) as SceneNode<THREE.Object3D>;
5966

60-
const rootNodeTemplate = new SceneNode("", makeRoot);
61-
const rootAxesNode = new SceneNode("/WorldAxes", rootAxesTemplate);
67+
const rootAxesNode = new SceneNode(
68+
"/WorldAxes",
69+
rootAxesTemplate
70+
) as SceneNode<THREE.Object3D>;
6271
rootNodeTemplate.children.push("/WorldAxes");
6372

6473
const cleanSceneTreeState = {
@@ -187,7 +196,7 @@ function SceneNodeThreeChildren(props: {
187196

188197
/** Component containing the three.js object and children for a particular scene node. */
189198
export const SceneNodeThreeObject = React.memo(
190-
// This memo is very important for big scenes!!
199+
// ^This memo is very important for big scenes!!
191200
function SceneNodeThreeObject(props: {
192201
name: string;
193202
useSceneTree: UseSceneTree;

‎viser/client/src/WebsocketInterface.tsx‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,12 @@ function useMessageHandler() {
7777

7878
// Same as addSceneNode, but make a parent in the form of a dummy coordinate
7979
// frame if it doesn't exist yet.
80-
function addSceneNodeMakeParents(node: SceneNode) {
80+
function addSceneNodeMakeParents(node: SceneNode<any>) {
8181
const nodeFromName = viewer.useSceneTree.getState().nodeFromName;
8282
const parent_name = node.name.split("/").slice(0, -1).join("/");
8383
if (!(parent_name in nodeFromName)) {
8484
addSceneNodeMakeParents(
85-
new SceneNode(parent_name, (ref) => (
85+
new SceneNode<THREE.Group>(parent_name, (ref) => (
8686
<CoordinateFrame ref={ref} show_axes={false} />
8787
))
8888
);
@@ -96,7 +96,7 @@ function useMessageHandler() {
9696
// Add a coordinate frame.
9797
case "FrameMessage": {
9898
addSceneNodeMakeParents(
99-
new SceneNode(message.name, (ref) => (
99+
new SceneNode<THREE.Group>(message.name, (ref) => (
100100
<CoordinateFrame
101101
ref={ref}
102102
show_axes={message.show_axes}
@@ -137,7 +137,7 @@ function useMessageHandler() {
137137
);
138138

139139
addSceneNodeMakeParents(
140-
new SceneNode(
140+
new SceneNode<THREE.Points>(
141141
message.name,
142142
(ref) => (
143143
<points
@@ -192,7 +192,7 @@ function useMessageHandler() {
192192
geometry.computeVertexNormals();
193193
geometry.computeBoundingSphere();
194194
addSceneNodeMakeParents(
195-
new SceneNode(
195+
new SceneNode<THREE.Mesh>(
196196
message.name,
197197
(ref) => <mesh ref={ref} geometry={geometry} material={material} />,
198198
() => {
@@ -218,7 +218,7 @@ function useMessageHandler() {
218218
const height = message.scale * Math.tan(message.fov / 2.0) * 2.0;
219219

220220
addSceneNodeMakeParents(
221-
new SceneNode(
221+
new SceneNode<THREE.Group>(
222222
message.name,
223223
(ref) => (
224224
<group ref={ref}>
@@ -230,7 +230,6 @@ function useMessageHandler() {
230230
/>
231231
{texture && (
232232
<mesh
233-
ref={ref}
234233
position={[0.0, 0.0, message.scale]}
235234
rotation={new THREE.Euler(Math.PI, 0.0, 0.0)}
236235
>
@@ -260,7 +259,7 @@ function useMessageHandler() {
260259
25
261260
);
262261
addSceneNodeMakeParents(
263-
new SceneNode(message.name, (ref) => (
262+
new SceneNode<THREE.Group>(message.name, (ref) => (
264263
<PivotControls
265264
ref={ref}
266265
scale={message.scale}
@@ -423,19 +422,22 @@ function useMessageHandler() {
423422
}
424423
`;
425424
addSceneNodeMakeParents(
426-
new SceneNode(message.name, (ref) => {
425+
new SceneNode<THREE.Group>(message.name, (ref) => {
426+
// We wrap with <group /> because Html doesn't implement THREE.Object3D.
427427
return (
428-
<Html ref={ref}>
429-
<div
430-
style={{
431-
width: "10em",
432-
fontSize: "0.8em",
433-
transform: "translateX(-1em) translateY(1em)",
434-
}}
435-
>
436-
<Label>{message.text}</Label>
437-
</div>
438-
</Html>
428+
<group ref={ref}>
429+
<Html>
430+
<div
431+
style={{
432+
width: "10em",
433+
fontSize: "0.8em",
434+
transform: "translateX(-1em) translateY(1em)",
435+
}}
436+
>
437+
<Label>{message.text}</Label>
438+
</div>
439+
</Html>
440+
</group>
439441
);
440442
})
441443
);
@@ -451,7 +453,7 @@ function useMessageHandler() {
451453
(texture) => {
452454
// TODO: this onLoad callback prevents flickering, but could cause messages to be handled slightly out-of-order.
453455
addSceneNodeMakeParents(
454-
new SceneNode(
456+
new SceneNode<THREE.Group>(
455457
message.name,
456458
(ref) => {
457459
return (

0 commit comments

Comments
 (0)