Improve connector visualisation

[follower]

Connectors have both a position and a direction attribute but the current visualisations (using spheres) only clearly show the position attribute.

Since understanding the direction attribute seems to be important in understanding how connectors work it seems like it would be a good idea to visually indicate the direction of a connector.

(My initial mis-understanding about connector direction was that I thought a connector's direction was always perpendicular to the object to which it was attached (e.g. the geometric normal of PCB) but this is not the case for the board loader.

This was discovered by using a THREE.ArrowHelper to visualise the direction of the connector. The ArrowHelper visualisation shows that the component connector direction runs along (i.e. parallel to) the surface of the board.)

I feel like a notched disc/extruded triangle may be a clearer connector visualisation or, at least, adding an arrowhead/cone that protrudes from the current sphere.

I've experimented with some possible direction visualisation approaches but have uncovered some wider issues:

• The loader doesn't currently use the ConnectorHelper to visualise connectors, see: #6
• The ConnectorHelper constructor currently does not receive the connector itself nor connector direction which would be needed in order to be able to indicate the direction in the visualisation.
• The connector visualisation appears to currently be unconnected to the connector object itself which results in the visualisation not being updated when the connector changes e.g. due to a change in orientation of the object to which it is attached. (This seems to not currently be an issue in the position-only visualisation due to the symmetrical appearance of the sphere.) (This seems to mean that ConnectorHelper can only be added after all positioning is completed but also that the direction may still be incorrect. By way of comparison, the ArrowHelper visualisation does correctly set the direction, presumably due to the code in ArrowHelper.prototype.setDirection().)

[follower]

Here are two visualisation variations:

(Note that, in this case I think the direction indicator has been rotated an additional 90 degrees from the correct direction due to this experiment not accounting for a change in how its drawn.)

(Note also that the wireframe version of the sphere can also partially indicate the direction (related to the value of this.marker.matrixAutoUpdate).)

[follower]

Due to: the interrelated issues; the fact that I now understand the connector direction aspect; and, have a way to manually debug connector direction visualisation (see below) I'll put the connector visualisation aside for now and return to component model loading/display.

The following will display an arrow for the connector direction:

    ah = new THREE.ArrowHelper(connector_mesh.getWorldDirection(), connector_mesh.getWorldPosition(), 6, 0x99cc88, 5, 2)                                                                         
    scene.add(ah);                                                                        

[follower]

I've realised there seem to be a couple of other factors at play here too:

• While the general Three.js approach is to use "direction" (e.g. via .getWorldDirection()), in theory it seems that for connectors the normalVector should be consulted "to see what direction the Connector is pointing" (according to connector.js docs). But (unless I'm using it incorrectly) it seems like the normalVector doesn't get updated when the connector is rotated. e.g. (via:

  • scene.add(new THREE.ArrowHelper(connector_c2._connections[0].localToWorld(connector_c2._connections[0].normalVector), connector_c2._connections[0].getWorldPosition(), 50, 0x00ff55, 5, 2)) // green
  • scene.add(new THREE.ArrowHelper(connector_c2._connections[0].getWorldDirection(), connector_c2._connections[0].getWorldPosition(), 50, 0xff0055, 5, 2)) // red
  • scene.add(new THREE.ArrowHelper(connector_c2._connections[0].localToWorld(connector_c2._connections[0].normalVector), new THREE.Vector3(0,0,0), 50, 0x000055, 5, 2)) // blue)

  )

  • However, within the Connector code the normalVector property is only used when mirroring/rotating during a call to .connectTo(). The docs say "or set [normalVector] using a THREE.Vector3 to set the Connector's orientation by vector" but it's not clear if this means the rotation should only be set via this method--which might explain the current incorrect result.

  • The third aspect is that the issues around this highlight that even when using an ArrowHelper with the ConnectorHelper to indicate orientation, it doesn't provide any visibility into the rotation of the connector.