I've built a scene with a cube and a camera placed in the center of the cube. I am able to rotate the cube. Ideally I would like to limit to rotation to horizontal.
Is there any way to count the amount of rotation? For example, being able to know at every amount that I rotated 30 radians in a direction, and if I rotate backgword the amount gets updated accordingly.
Related
I'm using ThreeJS, but this is a general math question.
My end goal is to position an object in my scene using 2D screen space coordinates; however, I want a specific z position in the perspective projection.
As an example, I have a sphere that I want to place towards the bottom left of the screen while having the sphere be 5 units away from the camera. If the camera were to move, the sphere would maintain its perceived size and position.
I can't use an orthographic camera because the sphere needs to be able to move around in the perspective projection. At some point the sphere will be undocked from the screen and interact with the scene using physics.
I'm sure the solution is somewhere in the camera inverse matrix, however, that is beyond my abilities at the current moment.
Any help is greatly appreciated.
Thanks!
Your post includes too many questions, which is out of scope for StackOverflow. But I’ll try to answer just the main one:
Create a plane Mesh using PlaneGeometry.
Rotate it to face the camera, place it 5 units away from the camera.
Add it as a child with camera.add(plane); so whenever the camera moves, the plane moves with it.
Use a Raycaster’s .setfromCamera(cords, cam)
then
.intersectObject(plane)
method to convert x, y screen cords into an x, y, z world position where it
intersects the plane. You can read about it in the docs.
Once it’s working, make the plane invisible with visible = false
You can see the raycaster working in this official example: https://threejs.org/examples/#webgl_geometry_terrain_raycast
I'm working on a project where I'm putting a 3d cylinder object in front of a static 2d image on a three.js canvas, trying to make the cylinder look like its part of the photo.
In order for the 3d cylinder's perspective to match the photo behind it, it needs to be moved down the y axis. The problem is then it's moved out of the scene. I need a way to render the 3d cylinder how it would look with a -y position, but not actually move down the scene.
See image for details:
A combination of x-axis rotation to around 24 degrees, Lowering the FOV to around 10, and increasing the camera.position.z to about 35 got me the results I needed. Thank you #prisoner849
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'm trying to use Three.js to create an ’asteroid field' using particle systems or point clouds or stuff like that. One of the problems I've bumped into with all of these is that when the camera rotates around the z axis, the particles rotate individually with the camera, preserving the same orientation no matter how the camera is turned. I want the simulation to look as if the user is flying through a bunch of asteroids, and obviously asteroids don't magically spin whenever you tilt your head, so I was wondering if there is any way to prevent them from turning when the camera turns. Must particles always be upright?
If you want to rotate sprites you can use attribute SpriteMaterial.rotation:
var sprite = new THREE.Sprite( new THREE.SpriteMaterial({map: texture,rotation: Math.PI/4}));
see this http://threejs.org/examples/webgl_sprites.html
In your case, rotation of all sprites should be equal to camera rotation.
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.