Rotation not working in React

[Hulsegge]

Hi,

First of all thanks for this amazing tool!
I setted up the Itown viewer inside React, all seems to work fine except rotating the camera.

• Version used: "^2.45.1"
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): Windows 10

First i opened the example:
https://www.itowns-project.org/itowns/examples/index.html#view_25d_map
This works all as expected, so i guess it's nothing with the Browser or OS

Then i loaded the same code inside React. All works the same except the rotating the camera.
What can it be?

Here is my code:

import {
ColorLayer,
ElevationLayer,
Extent,
LabelLayer,
PlanarView,
STRATEGY_DICHOTOMY,
WFSSource,
WMSSource,
} from 'itowns';
import React, { useEffect, useRef, useState } from 'react';
import proj4 from 'proj4';
import * as THREE from 'three';
import { zoomToRdCoordinates } from './customCameraUtils';

// import * as OBCF from '@thatopen/components-front';

const Test: React.FC = () => {
const containerRef = useRef(null);
const [view, setView] = useState<PlanarView | null>(null);

useEffect(() => {
// Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
proj4.defs(
'EPSG:3946',
'+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs',
);
/* global itowns, setupLoadingScreen, GuiTools, debug */
// # Planar (EPSG:3946) viewer

var extent;
var viewerDiv;
var view;
var p;
var menuGlobe;
var d;

// Define geographic extent: CRS, min/max X, min/max Y
extent = new Extent(
  'EPSG:3946',
  1837816.94334,
  1847692.32501,
  5170036.4587,
  5178412.82698,
);

// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
viewerDiv = document.getElementById('viewerDiv');

// Instanciate PlanarView*
view = new PlanarView(containerRef.current as HTMLDivElement, extent, {
  placement: { heading: 49.6, range: 6200, tilt: 17 },
});

// Add a WMS imagery source
var wmsImagerySource = new WMSSource({
  extent: extent,
  name: 'ortho_latest',
  url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
  version: '1.3.0',
  crs: 'EPSG:3946',
  format: 'image/jpeg',
});

// Add a WMS imagery layer
var wmsImageryLayer = new ColorLayer('wms_imagery', {
  updateStrategy: {
    type: STRATEGY_DICHOTOMY,
    options: {},
  },
  source: wmsImagerySource,
});

view.addLayer(wmsImageryLayer);

// Add a WMS elevation source
var wmsElevationSource = new WMSSource({
  extent: extent,
  url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
  name: 'MNT2018_Altitude_2m',
  crs: 'EPSG:3946',
  width: 256,
  format: 'image/jpeg',
});

// Add a WMS elevation layer
var wmsElevationLayer = new ElevationLayer('wms_elevation', {
  useColorTextureElevation: true,
  colorTextureElevationMinZ: 144,
  colorTextureElevationMaxZ: 622,
  source: wmsElevationSource,
});

view.addLayer(wmsElevationLayer);

var wfsCartoSource = new WFSSource({
  url: 'https://data.geopf.fr/wfs/ows?',
  version: '2.0.0',
  typeName: 'BDCARTO_V5:zone_d_habitation',
  crs: 'EPSG:3946',
  format: 'application/json',
});

var wfsCartoStyle = {
  zoom: { min: 0, max: 20 },
  text: {
    field: '{toponyme}',
    color: 'white',
    transform: 'uppercase',
    size: 15,
    haloColor: 'rgba(20,20,20, 0.8)',
    haloWidth: 3,
  },
};

var wfsCartoLayer = new LabelLayer('wfsCarto', {
  source: wfsCartoSource,
  style: wfsCartoStyle,
});

view.addLayer(wfsCartoLayer);

// Request redraw
view.notifyChange();

}, []);

view?.notifyChange();
return

;
};

export default Test;