I'm doing mechanical CAD where the "up" is the Z axis (positive towards the sky), but orbitcontrol assumes that Y is the sky. I'm not really willing to change the global axes labeling in my code because it would be a nightmare in the development to jump between mechanical thinking and three.js thinking.
Is there a smart way to change the rotation axis of the control? Or some kind of very local way to change the axes just for the camera/control sub-system?
The version of OrbitControls in the three.js dev branch will accommodate any camera.up direction.
If you want the camera to rotate around the z-axis, with the z-axis "up", just do this:
camera.up.set( 0, 0, 1 );
three.js r.67dev
Related
I'm trying to learn the ThreeJS positioning functions, but I'm not quite getting there.
I have a light and an animation loop. I want this light to be at a fixed angle relative to the camera pointing towards 0,0,0.
I can make the light come from the camera angle itself like so (in animation loop):
rectLight.position.copy(camera.position);
rectLight.lookAt(0,0,0);
But I don't want it to come from the viewer's perspective, I want it to come from somewhere else relative to it, and at a set distance from center.
So I think it's camera angle +/- some degrees/radians, and then a fixed distance.
I've tried adjusting the coordinates relative to the camera position, like y += 25, y *= 3, and such. Everything I try gives me some whacky light placement motion I don't understand. I'm sorry, 8th grade geometry teacher, I should have paid attention.
I'm trying to add clouds to my scene using the approach in https://codepen.io/teolitto/pen/KwOVvL, which is to make a large number of plane objects at random positions that each rotate continuously around their z axes.
But I would like to be able to move my camera, change its target, etc., and still have the cloud planes look right.
What I need to do is rotate the planes so that as the camera moves and changes target, the cloud planes stay perpendicular to the camera's axis. And I need to do this without changing the planes' rotation around their own z-axis, because otherwise that would break the cloudlike appearance.
I've tried cloudplane.lookAt(camera.position) but of course that doesn't work. It aims all of the planes at the camera, instead of making them all perpendicular to the camera axis. It also sets the object's z-axis, so the clouds don't evolve.
Any advice is appreciated. (I'm new to three.js, so if I have some of the terminology wrong, I apologize for that.)
Edit:
Setting the cloudplane's rotation.x and rotation.y to match the camera's rotation.x and rotation.y seems to get me pretty close, but it doesn't quite get there - its still possible to orbit the camera to a position where the clouds are all invisible because they're all parallel to the camera.
I am working on THREE.js orthographic camera, I am using 'OrbitalControls.js' for controls.
I want to zoom in the direction of mouse in 3D world. Hoping to get solution in JS. I know this one is not easy solution like perspective camera.(where we add in camera direction)
There is a .zoom parameter on the orthographic camera.
Try setting increasing/decreasing it.
This can be solved by figuring out the difference between your current zoom level and the next one, and then by panning in the direction of the mouse.
Your OrthographicCamera has a width and hight in world units camera.right - camera.left and camera.top - camera.bottom. Say you're at zoom level 1, and you zoom to 2, you divide these by two and get the new width and height in world units.
You need to figure out the difference in X Y and pan the camera in that direction.
I'm working on a simple Three.js demo that uses OrbitControls.js.
I'd like to change the behavior of panning in OrbitControls. Currently, when you pan the camera, it moves the camera in a plane that is perpendicular to the viewing direction. I'd like to change it so that the camera stays a constant distance from the ground plane and moves parallel to it. Google Earth uses a similar control setup.
Edit: I should have mentioned this detail in the first place, but I'd also like the point where you click and start dragging to remain directly under the cursor throughout the entire drag. There needs to be that solid connection between the mouse movement and what the user expects to happen on the screen. Otherwise, it feels as though I'm 'slipping' when I try to move around the scene.
Can someone give me a high-level explanation of how this might be done (with or without OrbitControls.js)?
EDIT: OrbitControls now supports panning parallel to the "ground plane", and it is the default.
To pan parallel to screen-space (the legacy behavior), set:
controls.screenSpacePanning = true;
Also available is MapControls, which has an API similar to that of Google Earth.
three.js r.94
Some time ago I was working on exactly this issue, i.e. adaptation of OrbitControls.js to map navigation.
Here's the code of MapControls.js.
Here's the demo of the controls.
I figured it out. Here's the overview:
Store the mousedown event somewhere.
When the mouse moves, get the new mousedown event.
For each of those points, find the points on the plane where those clicks are located (You'll need to put the points into camera space, transform them into world space, then fire a ray from the camera through each point to find their intersections with the plane. This page explains the ray-plane intersection test).
Subtract the world-space start intersection point from the world-space end intersection point to get the offset.
Subtract that offset from the camera's target point and you're done!
In the case of OrbitControl.js, the camera always looks at the target point, and its position is relative to that point. So when you change the target, the camera moves with it. Since the target always lies on the plane, the camera moves parallel to that plane (as long as you're panning).
You should set your camera 'up' to z axe:
camera.up.set(0,0,1)
And then, the main problem with OrbitControl is its panUp() function. It should be fixed.
My pull request : https://github.com/mrdoob/three.js/pull/12727
y axe is relative to camera axes and should be relative to a fixed plan in the world. To define the expected y axe, make a 90° rotation of camera x axe, based on world z axe.
v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
v.applyAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.PI / 2 );
v.multiplyScalar( distance );
panOffset.add( v )
Enjoy!
Good evening,
I was using EaselJS and now I'm trying to figure out how to use ThreeJS.
In EaselJS, you can set the rotation point of an element on the canvas before rotating it, .but it seems impossible to do the same thing in ThreeJS.
So, how can I draw a Sphere very 30deg to form a circle, like a clock.
A sphere at 12, at 1 o'clock, 2 o'clock, 3 o'clock...
I can rotate my sphere (which is useless) and position it, but I don't know how to calculate the coordinates.
Can't wait to hear back from one of you,
Jay
You need to translate then rotate each sphere.
so translate each circle by the radius of the clock,
circle.translateZ(10);
then rotate it into place by rotating around the clock center. In this case around the y axis,
circle.rotateOnAxis(new THREE.Vector3(0.0, 1.0, 0.0), THREE.Math.degToRad(30*i));
Do that for each circle.
Both libraries are based on a hierarchy scene with matrix rotations and translations. But one is 3D. Also the API is kinda different.