Welcome to reprint, reprint with the article source link ~~, I hope my experience can help you, have a problem you can click my avatar plus my wechat this article only to provide a solution to the problems encountered, for those who urgently want to achieve functional effect, I hope to be able to slightly sink down to watch, or directly watch the train of thought, The code of this article can not be used directly, the complete code is only the problem solved in this article to use the code, if directly used may have an error, as long as you modify the code can be used
Cesiumjs+Threejs development to solve the problem of model display on the back of the earth
Models that should have been hidden when they were on the back of earth are now being displayed.
– reference –
CesiumJs+ThreeJs actually measured cesium and three.js to solve the problem that the model of the higher version of three.js could not get the center coordinate of CesiumJs
Description –
Why did it go wrong?
Cesiumjs and Threejs integration principle, by positioning two DOM nodes, make two DOM overlap, Threejs on Cesiumjs.
② Locally view, Threejs Mesh is displayed in the corresponding position.
③ After the rotation of the perspective, the model on the back of the Earth should have disappeared, because there is no object block, so the model still exists, there is a BUG.
– Major version –
Three. Js r123, not limited to this version cesium. Js 1.76, not limited to this version
Thinking –
Select * from *; / / select * from *; Pointer; / / select * from *; / / select * from *
– process –
1. Cesium and Three integration
The official cesium and Threejs combination scheme, where the loop code will be normalized, is shown below.
function loop() { requestAnimationFrame(loop); //loop renderCesium(); // render cesium renderThree(); // Render three renderCamera(); // View adjustment}Copy the code2. Obtain the center point coordinates
In the renderCamera view adjustment code, modify and add the code to obtain the center coordinate point under the current view. The code here is written in two parts for easy viewing by the code. The callback is in Step 3.
Function getCenterPosition(callback) {var viewer = cesium. Viewer; var result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas .clientHeight / 2)); var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result); var lon = curPosition.longitude * 180 / Math.PI; var lat = curPosition.latitude * 180 / Math.PI; var height = getHeight(); Var now = getCurrentExtent(); Callback (lon,lat,height,now); return { lon: lon, lat: lat, height: height }; }Copy the code3, dynamically modify the Threejs model explicit implicit
This method is called in the renderCamera view adjustment code to show and hide the model
getCenterPosition((lon, lat, height, now) => { let hei = now.height; For (let k in modelDict) {let item = modelDict[k]; var pos = item.getPosition(); let lon1 = pos.lon; let lat1 = pos.lat; let hei1 = pos.hei; if (Math.abs(lon1 - lon) > 300) { if (lon1 < 0) { lon1 += 360 } else { lon += 360 } } if (Math.abs(lon1 - lon) > 90 + hei1 / 100000 || Math.abs(lat1 - lat) > 60) { item.setVisible(false); } else { item.setVisible(true); } // Optimize the display if (hei-hei1 < 2000000&& math.abs (lon-lon1) < 6 && math.abs (Lat-lat1) < 6) {item.setVisible(true); } else { item.setVisible(false); }}});Copy the code– Complete code –
function loop() { requestAnimationFrame(loop); renderCesium(); // render cesium renderThree(); // Render three renderCamera(); // nowDate += 1000 * 60 // var utc=Cesium.JulianDate.fromDate(new Date(nowDate)); / / get the current time. / / cesium viewer. ClockViewModel. CurrentTime = cesium. JulianDate. AddHours (utc, 0, new cesium. JulianDate ()); } function renderCesium() {cesium.viewer.render(); } function renderThree() { var width = ThreeContainer.clientWidth; var height = ThreeContainer.clientHeight; three.renderer.setSize(width, height); three.renderer.render(three.scene, three.camera); } function renderCamera() { // register Three.js scene with Cesium three.camera.fov = Cesium.Math.toDegrees(cesium.viewer.camera.frustum.fovy) // ThreeJS FOV is vertical three.camera.updateProjectionMatrix(); // Clone Cesium Camera projection position so the // Three.js Object will appear to be at the same place as above the Cesium Globe three.camera.matrixAutoUpdate = false; var cvm = cesium.viewer.camera.viewMatrix; var civm = cesium.viewer.camera.inverseViewMatrix; three.camera.lookAt(new THREE.Vector3(0, 0, 0)); three.camera.matrixWorld.set( civm[0], civm[4], civm[8], civm[12], civm[1], civm[5], civm[9], civm[13], civm[2], civm[6], civm[10], civm[14], civm[3], civm[7], civm[11], civm[15] ); three.camera.matrixWorldInverse.set( cvm[0], cvm[4], cvm[8], cvm[12], cvm[1], cvm[5], cvm[9], cvm[13], cvm[2], cvm[6], cvm[10], cvm[14], cvm[3], cvm[7], cvm[11], cvm[15] ); var width = ThreeContainer.clientWidth; var height = ThreeContainer.clientHeight; var aspect = width / height; three.camera.aspect = aspect; three.camera.updateProjectionMatrix(); getCenterPosition((lon, lat, height, now) => { let hei = now.height; For (let k in modelDict) {let item = modelDict[k]; var pos = item.getPosition(); let lon1 = pos.lon; let lat1 = pos.lat; let hei1 = pos.hei; if (Math.abs(lon1 - lon) > 300) { if (lon1 < 0) { lon1 += 360 } else { lon += 360 } } if (Math.abs(lon1 - lon) > 90 + hei1 / 100000 || Math.abs(lat1 - lat) > 60) { item.setVisible(false); } else { item.setVisible(true); } // Optimize the display if (hei-hei1 < 2000000&& math.abs (lon-lon1) < 6 && math.abs (Lat-lat1) < 6) {item.setVisible(true); } else { item.setVisible(false); }}}); } function getCenterPosition(callback) {var viewer = cesium. Viewer; var result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas .clientHeight / 2)); var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result); var lon = curPosition.longitude * 180 / Math.PI; var lat = curPosition.latitude * 180 / Math.PI; var height = getHeight(); var now = getCurrentExtent(); callback(lon,lat,height,now); return { lon: lon, lat: lat, height: height }; } function getHeight() {var viewer = cesium. Viewer; if (viewer) { var scene = viewer.scene; var ellipsoid = scene.globe.ellipsoid; var height = ellipsoid.cartesianToCartographic(viewer.camera.position).height; return height; }} function getCurrentExtent() {var extent = {}; Var viewer = cesium. Viewer; var scene = viewer.scene; Var ellipsoid = scene.globe. Ellipsoid; var canvas = scene.canvas; / / var car3_lt = left upper corner of the canvas viewer. Camera. PickEllipsoid (new Cesium. Cartesian2 (0, 0), ellipsoid); / var/canvas the lower right corner car3_rb = viewer. Camera. PickEllipsoid (new Cesium. Cartesian2 (canvas. Width, canvas. Height), ellipsoid); / / when all canvas upper left and lower right on the ellipsoid if (car3_lt && car3_rb) {var carto_lt = ellipsoid. CartesianToCartographic (car3_lt); var carto_rb = ellipsoid.cartesianToCartographic(car3_rb); extent.xmin = Cesium.Math.toDegrees(carto_lt.longitude); extent.ymax = Cesium.Math.toDegrees(carto_lt.latitude); extent.xmax = Cesium.Math.toDegrees(carto_rb.longitude); extent.ymin = Cesium.Math.toDegrees(carto_rb.latitude); } // If the top left corner is not on the canvas but the bottom right corner is on the ellipsoid else if (! car3_lt && car3_rb) { var car3_lt2 = null; var yIndex = 0; YIndex <= canvas.height? yIndex += 10 : canvas.height; car3_lt2 = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(0, yIndex), ellipsoid); } while (! car3_lt2); var carto_lt2 = ellipsoid.cartesianToCartographic(car3_lt2); var carto_rb2 = ellipsoid.cartesianToCartographic(car3_rb); extent.xmin = Cesium.Math.toDegrees(carto_lt2.longitude); extent.ymax = Cesium.Math.toDegrees(carto_lt2.latitude); extent.xmax = Cesium.Math.toDegrees(carto_rb2.longitude); extent.ymin = Cesium.Math.toDegrees(carto_rb2.latitude); } / / get highly among height = math.h ceil (viewer. Camera. PositionCartographic. Height); return extent; }Copy the code