16 Feb 2016

Changing getHitPoint to return dbId

Default blog image

Follow me @augustomaia

The original ViewingUtilities.Utilities.getHitPoint method return the XY coordinate where the give coordinate (e.g. mouse position) hits the model (e.g. the face right over the mouse cursor). Although this quite useful, I needed to read the properties of that object. This is basically how to get the dbId of the highlighted object.

This modified version (renamed to getHitDbId) uses basically the same code, but instead returns the dbId. First register for the mouse move event (requires jQuery):

$(_viewer.container).bind("mousemove", onMouseMove);

Then implement the event and the modified version of the code:

function onMouseMove(e) {
    var screenPoint = {
        x: event.clientX,
        y: event.clientY
    var n = normalize(screenPoint);
    var dbId = /*_viewer.utilities.getHitPoint*/ getHitDbId(n.x, n.y);
    if (dbId == null) return;

    _viewer.model.getProperties(dbId, function (props) {
        // do something here

// This is a built-in method getHitPoint, but the original returns
// the hit point, so this modified version returns the dbId
function getHitDbId(x, y) {
    y = 1.0 - y;
    x = x * 2.0 - 1.0;
    y = y * 2.0 - 1.0;

    var vpVec = new THREE.Vector3(x, y, 1);

    var result = _viewer.impl.hitTestViewport(vpVec, false);
    return result ? result.dbId : null;

// originally wrote by Philippe
function normalize(screenPoint) {
    var viewport = _viewer.navigation.getScreenViewport();
    var n = {
        x: (screenPoint.x - viewport.left) / viewport.width,
        y: (screenPoint.y - viewport.top) / viewport.height
    return n;


Related Article