I'm trying to set an objection rotation to Math.PI / 180 * 90, however, the problem is that when I add the camera to my object by object.add(camera), I cannot modify any of my objects rotations anymore. When I take off the camera from the object, it is working fine. I'm using OrbitContrls. What I'm basically trying to do is to switch the rotation axis of the orbit controls, which I do through the .rotation.x.
What I found out what I could do is modify the up for the camera and it will sort things out. I did:
camera.up.set(0, 0, 1);
and my problems were solved.
Related
In three.js, when we define the camera we use something like camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far); If the object is moved outside the bounds set by the two planes, far and near then it is clipped.
Suppose now I rotate the object and I zoom in/out.
How can I find the current plane my camera is on please? I am learning three.js, hence I dont know If I am explaining this clear enough.
I thought that it was camera.position.z that would give me this info. In fact, I think it gives the correct value when my camera looks down the z-axis. However when I rotate by 90 degrees, (effectively moving my camera on the x-axis) the value of camera.position.z changes by a lot.
I have added a graph in case it helps. The plane defined by the blue outline cuts through the data and is parallel to the far and near planes. As I zoom in and out, I am moving the plane forward and backward, right? Do I understand this correct or I have totally missed it? I would like to know the value (a float between far and near) indicating how far that blue plane is from the camera. If you rotate that distance shouldn't change
My end goal is to be able to find-out how close the scene is to the viewer. If it gets too close then I will be adding some more elements to the scene. If it is too far these elements will be removed.
I want to fit my object to my output window. There are some answers that describe how to do this by moving the camera or changing the fov but for my use case, I want to do it by moving the object and leaving the camera at the origin.
Distance from camera to object is I think:
var dist = size / 2 / Math.tan(Math.PI * camera.fov / 360);
I think this is the distance from closest point on object to the camera so I mix in the radius of the sphere (in this example) to account for that.
I have tried to adapt the code in other answers but it is not working. Can anyone spot my mistake?
https://jsfiddle.net/m1rLzm12/
I have initialised a perspective camera at a position looking at the origin (0,0,0). Reading around the most common solution to this I've found is the one described here https://stackoverflow.com/a/27412386/1330719.
From my understanding of the project method is, I should get a vector where the x,y coordinates are between -1 and 1. This doesn't seem to be the case at all and I end up getting coordinates that are completely out of bounds.
Furthermore, if the original vector point is at (0,0,0) I seem to get (NaN, NaN) back. If my camera is looking at position (0,0,0) I expect the Vector3 (0,0,0) to return (width/2, height/2).
In case it is needed, this is how I'm initialising my camera:
this.camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 10E5);
this.camera.position.set(0, 500, -500);
this.camera.lookAt(new THREE.Vector3(0,0,0));
this.camera.updateProjectionMatrix();
Does anyone have a reason why this might not be working? Or alternatively a recommended way of mapping a Vector3 point to the screen space given a camera?
A jsfiddle of what I mean:
https://jsfiddle.net/m78wjLyc/
You should also use camera.updateMatrixWorld(true) before projecting.
Usually this is done automatically by renderer, but you don't use any, so the camera.matrixWorld stays untouched after you change the position, and makes the camera project things as if it was at the world origin.
I'm a web developer with a good JavaScript experience, and I'm currently exploring Three.js possibilities. However, I'm not very familiar with 3D shapes and vocabulary, and I can't figure out how to build the shape I need.
I want to create a halfsphere, and be able to project a video inside this sphere. I have a panoramic spherical video, and I need to distort it to make it look like "plane".
Thanks to Paul's tutorial, I have drawn a sphere and projected my video on it. But the external sphere surface is convex, and I need a concave one! How can I to achieve that? Extruding a smaller sphere out of my initial one?
You can create a half-sphere by setting the additional SphereGeometry parameters:
const geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )
Experiment until you get exactly what you want.
You will also have to set the side property of the material you use for the sphere to either be THREE.BackSide or THREE.DoubleSide.
material.side = THREE.DoubleSide;
three.js r.143
You can use SphereBufferGeometry, to create a half sphere (hemisphere). The last argument does it: 0.5 * Math.PI. Also to be able to see something, you need to use THREE.DoubleSide for material.
var geometry = new THREE.SphereBufferGeometry(5, 8, 6, 0, 2*Math.PI, 0, 0.5 * Math.PI);
...
material.side = THREE.DoubleSide;
I have a web application I am trying to show a plane of map image tiles in a 3D space.
I want the plane to be always horizontal however the device rotate, the final effect is similar to this marine compass demo.
I can now capture device orientation through the W3C device orientation API for mobile devices, and I successfully rendered the map image tiles.
My problem is me lacking of essential math knowledge of how to rotate the camera correctly according to the device orientation.
I am using the Three.js library. I tried to set rotation of the camera object directly by the alpha/beta/gamma (converted to radian). But it's not working since the camera seems to always rotate according to the world axis used by openGL/webGL not according to its local axis.
I came across the idea of rotate a point 100 unit in front the camera and rotate the point relatively to the camera position by angles supplied by the device orientation API. But I don't know how to implement this either.
Can anyone help me with what I want to achieve?
EDIT:
MISTAKE CORRECTION:
For anyone interested in implementing similar things, I found out that Three.js objects uses local space axis by default, not world space axis, I was wrong. Though the official document stated that by setting "object.matrixAutoUpdate = false" and then modify "object.matrixWorld" and call "object.updateWorldMatrix()" you can manually move/rotate/scale the object in world axis. However it does not work when the object has a parent, the local axis matrix will always be used when the object has a parent.
According to the W3C Device Orientation Event Specification, the angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''.
The Three.js camera also rotates according to intrinsic angles. However the default order in which the rotations are applied is:
camera.rotation.order = 'XYZ'.
What you need to do, then, is to set:
camera.rotation.order = 'ZXY'; // or whatever order is appropriate for your device
You then set the camera rotation like so:
camera.rotation.x = beta * Math.PI / 180;
camera.rotation.y = gamma * Math.PI / 180;
camera.rotation.z = alpha * Math.PI / 180;
Disclaimer: I do not have your device type. This is an educated guess based on my knowledge of three.js.
EDIT: Updated for three.js r.65