OrthographicCamera with OrbitControls in three.js - javascript

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.

Related

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.

Correcting for perspective clipping in Three.js

I have a plane inside of a sphere in Three.js that I am rendering a shader to so that I can get effects on the sphere. I also use lookAt to align the plane with the camera. The issue I am experiencing is that if the camera gets too close to the sphere the plane seems to shrink into the sphere. I have determined the problem to be from the perspective nature of the camera as when the camera gets too close to the sphere its rays don't align with the edge of the plane anymore.
Here is a picture visualizing this: Perspective clipping
Also here is a JSFiddle that demonstrates this: https://jsfiddle.net/k8tc8ex6/1/
I know why this issue occurs, what I want to know is some possible solutions, what I am trying to achieve is that the edge of the plane will always appear to touch the edge of the sphere after the render.
Thanks so much in advance!
if I am right you are trying to "perfectly" fit mid section of a sphere into frustum of a perspective camera. What you are trying to achieve is impossible with a perspective view. As you said (demonstrated) the plane will exceed the bounds of the screen or there will be gaps with the edges of the plane and the screen.
If you badly want to "perfectly" fit the midsection of a sphere into the screen, you have 2 options:
1-) switch to orthographic camera
2-) stick to perspective camera, make your FOV very close to 0, give a huge distance to far plane so that your perspective camera will actually act as an orthographic camera.

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.

Moving camera and light with OrbitControls.js

I have a three.js globe that I've been working on. I've got the OrbitControls working so that when I click and drag around the place the camera moves position quite nicely. However I'd like the light to move at the same time. I tried
controls = new OrbitControls(camera,light,renderer.domElement );
but this doesn't work. Do I have to set up a separate control variabble that manages the light or can I control them both within the 'controls' variable. if so how do I do this?
Many thanks
Copy the cameras position and set it as spotlight position.
Do this In your update function because you want the light to follow when you are moving the camera:
spotlight.position.copy( camera.getWorldPosition() );
jsfiddle: http://jsfiddle.net/L0rdzbej/128/

Three.js Trackball Controls limit rotation and pan

I have a plane that the camera is looking straight at and am using Trackball Controls to be able to zoom, pan, and rotate the plane. I realize that currently there isn't a way to limit the rotation or pan like can with zoom in the file, but was hoping there is a fix for this.
I'd like to limit the rotation to only a few degrees and not be able to flip the plane in anyway. Also, I'd like to only allow panning when the plane is still visible on the screen. I don't want to allow a user to pan and be able to remove the plane from the window. Is there a quick fix to add to the Trackball Controls or how do I go about setting limits to the rotation and pan? Or is there a better type of control for handling this functionality?

Categories

Resources