I want to remove clipping planes in THREE js but I can't seem to find any information on how to do this. What I found is that orthographic camera can have negative value for near clipping plane.
If I put negative value in near clipping plane of perspective camera, it doesn't throw an error but doesn't show any objects.
I draw relatively huge objects and the near clipping plane is very frustrating when I try to explore them as they disapear completely if they are behind the camera even if most of the object should still be visible, is there a way to remove it so my objects always gets drawn?
here is the camera values I use:
var camera = new THREE.PerspectiveCamera(90, size.x/size.y, 0.1, 1000);
When I move, I move the camera instead of all the objects relative to a fixed camera, I guessed it would be more performent, but I don't think it matters for my problem.
All of the objects have position (0, 0, 0) but can have part extending up to 10-15 units away from their position
Related
What I have is an OrthographicCamera set up so that is has an isometric view of the scene and OrbitConrols added to allow for panning around and zooming but not for rotation.
What I’d like to have is a button that will centre the objects in a scene and zoom the OrthographicCamera so that the objects fit within the canvas area while keeping the isometric view, i.e. the angle between the camera.position and the camera.lookAt (control.target) point.
What I’ve tried is to set the controls.target at the centre of the bounding box of the objects in the scene.
I have 2 problems with the code at the moment.
The First is I couldn’t work out how to calculate the zoom level needed to make sure the objects in the scene are all in view. I’ve hard coded a value for just now.
The Second is that with the current code, if the camera is panned so that the objects appear nearly off the screen, either up or down, then when centred the angle of the camera changes. This was happening when the camera was panned far left or right but setting the max and min Azimuth Angle seems to prevent this.
camera rotates after centring
The image above shows the scene when loaded then after centering when the camera was panned so the objects were going off the top of the screen.
I have tried a number of ways to do this after looking at answers to similar questions as this but am still having problems getting it to work.
function fitDrawingToPage(){
// Variables Bbox etc are set outside the function
Bbox = new THREE.Box3();
for (const object of sceneObjects) Bbox.expandByObject(object);
newTarget = Bbox.getCenter(new THREE.Vector3());
controls.target.set( newTarget.x, newTarget.y, newTarget.z );
controls.update();
camera.zoom = 0.5;
camera.updateProjectionMatrix();
camera.updateMatrix();
render();
}
current example of code in jsfiddle
I have created a raytracing algorithm which currently displays a triangle on screen, and am now having trouble moving the camera around correctly.
I would like my code to have the arrow keys rotate the camera, and WASD move the camera in 3D space. The camera currently rotates correctly using two rotation matrices for y and z rotations.
The Problem
Moving the camera, rather than rotating, is where the issue arises. To move the camera, I require two vectors - cameraForward and cameraRight. These vectors can be added on to the position of the camera when input is detected. These vectors will also need to change when the cemara is rotated, in the same rotation as all the rays experience. But when I apply these rotation matrices to the vectors representing cameraRight and cameraForward, there seems to be an issue. Holding down the A or D key will result in the camera moving unexpectedly in circles or odd wavy lines.
I managed to fix the issue with cameraForward by using a different method. I added a couple lines of code which calculate when the ray at the centre as been 'fired' and proceed to set cameraForward to that ray. Therefore cameraForward will always follow the central ray being sent out i.e. the centre of the field of view. However, I cannot do the same with cameraRight, as this vector is not in the field of view.
Before solving cameraForward using this method the same issue arose with moving forwards and backwards.
I also tried taking the cross product of one of the other rays along with the cameraForward vector which I thought might produce cameraRight, but to no avail - more sporadic camera movement
I do not have the vector for cameraUp either so cannot calculate the cross product to find cameraRight.
I also thought maybe the code was being run too many times and the vector was rotated multiple times. However mvoing the code elsewhere had no effect and the method it was already in is run every frame, so I do not believe that is the issue.
Here is my code to rotate the camera right and the method which does the rotation.
camRight's inital value is (0, 0, 1)
camRight = normalize(rotateVector(camRight, rotationZ));
camRight = normalize(rotateVector(camRight, rotationY));
function rotateVector(v, m) {
return new Vector3(dot(m.a, v), dot(m.b, v), dot(m.c, v));
}
I know this code works as the code rotating the camera view functions correctly using the same matrices and methods.
(the following code)
myDirection = normalize(rotateVector(myDirection, rotationZ));
myDirection = normalize(rotateVector(myDirection, rotationY));
When the user presses A or D the following code is run
if (keys[65]) {
camPos = add(camPos, normalize(camRight));
requestAnimationFrame(render);
}
if (keys[68]) {
camPos = subtract(camPos, normalize(camRight));
requestAnimationFrame(render);
}
The camera moves forwards and backward correctly, as previously mentioned. Initially, the camera moves left and right correctly too (as its inital value of (0, 0, 1) is correct), but if I rotate the camera, the values for cameraRight go wild.
Have I assumed something wrongly? or is there a flaw in my logic somewhere?
Thank for any help
I have some planes, parented to an empty Object3D. Those planes are always facing the camera,like sprites. It works fine unless I rotate the parent. Three.js documentation says that .lookAt doesn't support transformed parents
So I am trying to figure out how to solve it manually.
Here is what I have now:
plane.onBeforeRender = function( renderer, scene, camera,
geometry, material, group ){
var worldCamPos = new THREE.Vector3();
camera.getWorldPosition(worldCamPos);
this.worldToLocal(worldCamPos);
this.lookAt(worldCamPos);
// this.quaternion.copy(camera.quaternion);//this one rotates in local space of the container
};
So I a m trying to convert camera's position to the space inside which the plane lives,and use it as lookAt target.
The problem is,the plane is sort of looking at the camera,but it constantly flickering as if swapping rotations from default to the desired one,back and forth. I don't concatenate here anything,so I don't understand why it happens.
I would appreciate if someone could point out to more elegant solution,maybe with quaternions.
I'm using the code of this answer to find the screen position of 3d objects in three.js:
Converting 3D position to 2d screen position [r69!]
I'm drawing a 2d line from the position of 3d object in the scene to a 2d point on the screen. some times the 3d object is outside the viewport. in that case i would like to draw a line from the 2d point on the screen to the edge towards the un-seen object, but i want it to be accurate in the right angle and to the right position.
anybody has any suggestions?
You can use THREE.Raycaster() and .depthTest = false property of a material of a THREE.Line() object to do that "trick".
raycaster.setFromCamera(mouse, camera);
raycaster.ray.at(1, dummyObject.position);
it gives us a point not far (1 unit) from camera from which you can set the beginning of the line to your object.
And
var line = new THREE.Line(lineGeom, new THREE.LineBasicMaterial({ color: color }));
line.material.depthTest = false;
The line will be always visible and can't be hidden by the other objects.
jsfiddle example. You can use zoom and rotation to make the object, linked to the red dot, pass out of the viewport and the red linking line will be at the right angle.
I'm newbie in three.js and WebGL.
In my application, there is 3D scene in which the two objects.
object - it is a big sphere;
object - a smaller sphere, which is located on the surface of the first object.
Big sphere rotates around its axis. And also there is the possibility to rotate the camera around the spheres.
So as a small sphere on the surface of a large sphere, it also rotates with it. Small sphere will be visible to us as large sphere turns to the camera and it will not be visible when a large sphere is in front of it.
The question is, how do I determine when a small sphere is visible to the camera, and when it is not visible?
Also, I need to get the coordinates in 2d for small sphere where it is visible. How can I do this?
This can be accomplished with three.js's built-in raycaster and projector functionalities. To start, try taking a look at this demo and its source code. Here is another example. In this way you can determine which objects are closer to an invisible line that is emitted from the camera's position.
Otherwise, if you are simply interested in which of the two objects is closer to the camera, you can simply check to see which of their position values have a lesser distance to the camera's coordinates. The three-dimensional distance formula would come in handy:
bigSphereDistance = Math.sqrt( Math.pow(camera.position.x - big.position.x,2) +
Math.pow(camera.position.y - big.position.y,2) +
Math.pow(camera.position.z - big.position.z,2) );
smallSphereDistance = Math.sqrt( Math.pow(camera.position.x - small.position.x,2) +
Math.pow(camera.position.y - small.position.y,2) +
Math.pow(camera.position.z - small.position.z,2) );
//then check...
bigSphereDistance > smallSphereDistance ? /*case*/ : /*case*/;
Intuitively, the small sphere is visible when its distance is less than that of the big sphere, with a buffer of the small sphere's radius.
To answer your second question, finding any object's 2D coordinates can accomplished like this.