I render cesium and potree on same canvas but when I added tileset from cesium It always laying behind pointcloud.
Tell me how to fix this issue.
I initialize both cesium and potree
cviewer = new Cesium.Viewer('cesiumContainer', {
useDefaultRenderLoop: false,
animation: false,
baseLayerPicker : false,
fullscreenButton: false,
geocoder: false,
homeButton: false,
infoBox: false,
sceneModePicker: false,
selectionIndicator: false,
timeline: false,
navigationHelpButton: false,
imageryProvider : Cesium.createOpenStreetMapImageryProvider({url : 'http://a.tile.openstreetmap.org/'}),
terrainShadows: Cesium.ShadowMode.DISABLED,
});
cviewer.snippet = new ThreeDTile();
viewer = new Potree.Viewer(document.getElementById("potree_render_area"),"");
viewer.setEDLEnabled(false);
viewer.setMaterial("RGB");
viewer.setFOV(60);
if(isMobile()==true)
viewer.setPointSize(2);
viewer.setPointSizing("Fixed");
viewer.setPointBudget(1*1000*1000); //medLow
else
viewer.setPointSize(1);
viewer.setPointSizing("Adaptive");
viewer.setPointBudget(2*1000*1000);
viewer.setQuality("Squares");
viewer.setEDLEnabled(false);
viewer.setShowSkybox(false);
viewer.setMaterialID(Potree.PointColorType.RGB);
viewer.setDescription('');
viewer.loadSettingsFromURL();
viewer.loadGUI();
let cp = new Cesium.Cartesian3(4303414.154026048, 552161.235598733, 4660771.704035539);
cviewer.camera.setView({
destination : cp,
orientation: {
heading : 10,
pitch : -Cesium.Math.PI_OVER_TWO * 0.5,
roll : 0.0
});
Call Cesium render function inside Potree render function
render(){
cviewer.render();
…..
}
I modified initThree() function remove line that add potree’s canvas in potree render area
// this.renderArea.appendChild(this.renderer.domElement);
and add cesium canvas in Three.WebGl Render
this.renderer = new THREE.WebGLRenderer({alpha : true,preserveDrawingBuffer: true , canvas : cviewer.canvas});
And also added the following lines as I see this on https://github.com/AnalyticalGraphicsInc/cesium/issues/648
var resetFunc = this.renderer.state.reset;
this.renderer.state.reset = function(){};
this.renderer.resetGLState();
this.renderer.state.reset = resetFunc;
I remove all events of Cesium except rotate because I want potree’s events only. And to stop collusion of some of the same events from both sides.
cviewer.scene.screenSpaceCameraController.enableTranslate = false;
cviewer.scene.screenSpaceCameraController.enableZoom = false;
cviewer.scene.screenSpaceCameraController.enableTilt = false;
cviewer.scene.screenSpaceCameraController.enableLook = false;
Identified pointdown event handler of Cesium from debugger and remove it. Because it stops orbit controls in potree.
function p(e, t, i, r) {
// function n(t) {
// r(e, t)
// }
i.addEventListener(t, n, !1),
e._removalFunctions.push(function() {
i.removeEventListener(t, n, !1)
})
}