Get Camera's Rectangle position from CesiumJS - javascript

I am having trouble to get Rectangle position of current Camera view.
I want to create a Rectangle or Wall on the same position as current Camera view (red rectangle). Is there any way to do this?
Thank you

I am not sure I understand you problem, but I think you may have luck using the the Cesium camera's computeViewRectangle function to get the approximate rectangle the camera can see.
Here is the documentation:
https://cesiumjs.org/Cesium/Build/Documentation/Camera.html#computeViewRectangle

Related

How to rotate and move a sprite towards the cursor?

Lets say that I have a player sprite, located at (player.x, player.y). On a mousemove event, I am capturing the cursor's position, which is (e.pageX, e.pageY). In the game, the player will be constantly moving, always towards the direction of the cursor. I am trying to find a way to to rotate the player sprite to always face the mouse cursor, and also move 10 pixels closer to the cursor every game tick. So far, this has me stumped. I have seen many examples of this online, and have tried all of them, but none seem to work. Any help that can be provided would be very much appreciated.
First of all, you must learn the basics of trigonometry. Without this knowledge, you will can't make something like you want.
Center of you image is the center of an circle. Knowing position of center and mouse position, you can calculate the angle. Calculated angle you can use to rotate image.

Openlayers: Why do my drawings on my image canvas layer move on zoom?

I have an OSM Layer, a static ImageLayer and a CanvasImageLayer on top. I want to draw at specific pixel positions (relative to the 0,0 origin of the canvas) icons, e.g. at position 10,10.
This works, however, I do not understand why my canvas is resized when I move and why my Icons are then at the wrong position?
Even if I calculate the positions based on the new canvas size, they move and don't stay in their position. I really would need an explanation to understand this.
I oriented myself on this ImageCanvas example.
I only found this related question, but it does not explain it, nor does it give a solution to the problem:
openlayers 3: how to draw sth using canvas.getContext('2d') on top of the map

OrthographicCamera with OrbitControls in three.js

I have developed a simple three.js application that renders a cube, and which have several buttons to set fixed camera positions.
The function associated with each button sets the camera position and orientation by doing camera.position.set(vector), and camera.lookAt(center_of_bounding_box). camera is a OrthographicCamera of three.js, and vector and center_of_bounding_box are both instances of the three.js class Vector3.
When I pan the cube, and set a fixed view, it is rendered correctly. However, when I pan it again, the application moves it, like if the controls had some kind of offset.
I am very new to three.js, and I could not resolve this problem searching on the web, because the given solutions seem to me that solve another issues. Should I do something in the OrbitControls when I set the camera position and orientation manually? Any help to face this issue will be appreciated, thanks.

Three.js layer for leaflet

I am currently trying to build an overlay layer for leaflet. The overlay is supposed to display 3D contents (e.g. buildings). However, I have trouble with keeping the movements on the leaflet map in sync with the ones in the scene in the overlay.
So far the canvas is as large as the map container and it will always overlay the map (like a position: fixed). In order to move around when the user is panning on the map I want to move the camera in the scene (instead of moving all geometries around). For position I use the distance from lat:0, lng:0 as THREE seems to struggle with fractal positions (e.g. when using decimal gps coordinates). Unfortunately I am struggling to find the correct formula to get the correct positions for the camera (x,y,z).
My attempt so far:
https://jsfiddle.net/hg474d6r/7/ (the _handleMove function is the relevant one)
The black dot is the center and for your reference. The red dot should remain static - relative to the map - which it doesn't.
So is there just a small issue in my formula/"calculations" or will this approach not even work at all?
Update: updated fiddle with progress and so on
It looks like that the Camera will points to a fixed Point.
If you move the Camera the Direction of the Camera Vector will be changed.
So You will see this Parallaxe Effekt.

Is mouse over possible in three.js pointerlock controls?

Understanding the fact that there would not be any cursor on the screen while using Point locker controls, is it possible to use mouse over somehow ? like a cube glows when my camera goes near or faces the cube geometry ?
https://stemkoski.github.io/Three.js/Mouse-Over.html pointer lock will be possible too, you only need to define right vector.
Best to use 2 scenes.

Categories

Resources