Moving camera and light with OrbitControls.js - javascript

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/

Related

Move orbitcontrol camera on circular path around object

newbie in threejs here.
I have a cube with different color on each face. The cube can be rotate using OrbitControl and I have 6 buttons in Dat.GUI to control the camera position. Objective is when clicking on "Animate to red", the orbitcontrol camera will move to the red face from its current position on a circular path, "Animate to blue" camera will move to the blue face and so on...
I have the "Animate to red" button somewhat working right now but I don't think my solution is right. Can someone point me to the right direction? Thanks
Here is my codesandbox link https://syckkt.csb.app/
So I've implemented a fix to your code here: https://exciting-haslett-vfbojd.csb.app/
The idea is to have a list of unit vectors representing each side, then animating the camera to that position. If the side is on the opposite side of the shape we animate to a perpendicular side first and then towards our target side after. Just check the code it's all in there.

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.

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.

Get Camera's Rectangle position from CesiumJS

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

CSS3 Translate3d : Element still be clickable even it's out of the scene on Firefox

I made a big cube with transform3D, and I put 6 DIVs, on each side of that cube which are all clickable.
And to make the users to feel like they're in this cube, I move the centroid of the cube to the center of the scene with the following css tricks:
TweenMax.set(cubeContainer, {perspective:500});
TweenMax.set(cube, {z : 500});
And the user is able to drag the cube to make it spin.
When the rotationX and rotationY of that cube is 0, the back side is supposed to be invisible and no any mouse event will be fired due to the perspective settings.
It works fine on Chrome.
And on Firefox, it is invisible but firing mouse events.
How would that happen?
It still not works even if I set the "backface-visibility" to "hidden".
Any ideas to fix it?
Thanks.
Update
I've added a jsFiddle
You can see that the shape is still clickable( just click the center of the container ) even if it's totally out of the scene.
But it's totally vanished on Chrome. Is this the bug of Firefox?
Or there's something need to be fixed in my code?

Categories

Resources