I'm ultimately trying to draw a polygon on top of my house. I can do that.
The problem is that on zoom-out, zoom-in, and rotation (or camera move) the polygon doesn't stick to the top of my house. I received great help from this answer. So, now I'm trying to go through the sample code but there is a lot of Cesium methods and functionality that I need to learn.
The sample code I am trying to follow is located in the gold standard that appears to be baked into the existing camera controller here.
I call testMe with the mousePosition as Cartesian3 and the SceneMode is 3D, so pickGlobe is executed.
Here is my code:
var pickedPosition; var scratchZoomPickRay = new Cesium.Ray(); var scratchPickCartesian = new Cesium.Cartesian3(); function testMe(mousePosition) { if (Cesium.defined(scene.globe)) { if(scene.mode !== Cesium.SceneMode.SCENE2D) { pickedPosition = pickGlobe(viewer, mousePosition, scratchPickCartesian); } else { pickedPosition = camera.getPickRay(mousePosition, scratchZoomPickRay).origin; } } } var pickGlobeScratchRay = new Cesium.Ray(); var scratchDepthIntersection = new Cesium.Cartesian3(); var scratchRayIntersection = new Cesium.Cartesian3(); function pickGlobe(viewer, mousePosition, result) { var globe = scene.globe; var camera = scene.camera; if (!Cesium.defined(globe)) { return undefined; } var depthIntersection; if (scene.pickPositionSupported) { depthIntersection = scene.pickPosition(mousePosition, scratchDepthIntersection); } var ray = camera.getPickRay(mousePosition, pickGlobeScratchRay); var rayIntersection = globe.pick(ray, scene, scratchRayIntersection); var pickDistance; if(Cesium.defined(depthIntersection)) { pickDistance = Cesium.Cartesian3.distance(depthIntersection, camera.positionWC); } else { pickDistance = Number.POSITIVE_INFINITY; } var rayDistance; if(Cesium.defined(rayIntersection)) { rayDistance = Cesium.Cartesian3.distance(rayIntersection, camera.positionWC); } else { rayDistance = Number.POSITIVE_INFINITY; } var scratchCenterPosition = new Cesium.Cartesian3(); if (pickDistance < rayDistance) { var cart = Cesium.Cartesian3.clone(depthIntersection, result); return cart; } var cart = Cesium.Cartesian3.clone(rayIntersection, result); return cart; }
Here is my problem:
Here is the result:
Here are my questions to get this code working:
1. How do I get the scene.pickPositionSupported set to true? I'm using Chrome on Windows 10. I cannot find in the sample code anything about this and I haven't had much luck with the documentation or Google.
2. Why is rayIntersection not getting set? ray and scene have values and scratchRayIntersection in an empty Cartesian3.
I think if I can get those two statements working, I can probably get the rest of the pickGlobe method working.
WebGLGraphics Report:
I clicked on Get WebGL and the cube is spinning!