iTowns / itowns

A Three.js-based framework written in Javascript/WebGL for visualizing 3D geospatial data
http://www.itowns-project.org
Other
1.06k stars 290 forks source link

[BUG] Label2DRenderer is not overlayed over canvas correctly #2301

Open HoloTheDrunk opened 3 months ago

HoloTheDrunk commented 3 months ago

Your Environment

Context

The Label2DRenderer does not have the same dimensions as the canvas and can overflow, catching inputs for the view outside of it in areas of the screen visually outside of it. Div containing both canvas and Label2DRenderer dom element: image The actual Label2DRenderer dom element: image

Steps to Reproduce (for bugs)

HTML:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body style="display: flex; flex-direction: row; height: 100vh; margin: auto">
        <div id="viewerDiv" style="flex: 4; width: 100%"></div>
        <div style="flex: 1; background-color: red; width: 100%"></div>
    </body>
</html>

TypeScript:

import * as itowns from "itowns";
import * as three from "three";
import proj4 from "proj4";

const viewerDiv = document.getElementById("viewerDiv") as HTMLDivElement;

proj4.defs(
    "EPSG:3946",
    "+proj=lcc +lat_0=46 +lon_0=3 +lat_1=45.25 +lat_2=46.75 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs",
);

const view = new itowns.View("EPSG:3946", viewerDiv);
view.mainLoop.gfxEngine.renderer.setClearColor(three.Color.NAMES.black, 1.0);

const controls = new itowns.PlanarControls(view as itowns.PlanarView);

let eptSource: itowns.EntwinePointTileSource;
let eptLayer: itowns.EntwinePointTileLayer;

function onLayerReady() {
    const lookAt = new three.Vector3();
    const size = new three.Vector3();
    eptLayer.root.bbox.getSize(size);
    eptLayer.root.bbox.getCenter(lookAt);

    (view.camera3D as three.PerspectiveCamera).far = size.length() * 2.0;

    controls.groundLevel = eptLayer.root.bbox.min.z;
    const position = eptLayer.root.bbox.min
        .clone()
        .add(size.multiply({ x: 0, y: 0, z: size.x / size.z }));

    view.camera3D.position.copy(position);
    view.camera3D.lookAt(lookAt);
    (view.camera3D as itowns.OrientedImageCamera).updateProjectionMatrix();

    view.notifyChange(view.camera3D);
}

function loadEPT(url: string) {
    eptSource = new itowns.EntwinePointTileSource({ url });

    if (eptLayer) {
        view.removeLayer("Entwine Point Tile");
        view.notifyChange();
        eptLayer.delete();
    }

    const config = {
        source: eptSource,
        crs: view.referenceCrs,
    };

    eptLayer = new itowns.EntwinePointTileLayer("Entwine Point Tile", config);

    view.addLayer(eptLayer).then(onLayerReady);
}

loadEPT(
    "https://download.data.grandlyon.com/files/grandlyon/imagerie/mnt2018/lidar/ept/",
);

Expected Behavior

The Label2DRenderer should have the same size as the canvas.

Actual Behavior

The Label2DRenderer is not the same size as the canvas, leading to capture of inputs outside of the view.

Possible Cause/Fix/Solution

Might have something to do with the use of flex boxes.