I am working on a Three.js scene that renders some statically-positioned and textured quads, and some of my quads are flickering when I move my camera around. I've seen this in the past when two quads exist at the same x, y, z coords (I believe people refer to this as z-fighting).
I'm unsure what causes this behavior in cases where two quads don't intersect at all though:
Does anyone know what might cause this behavior, or how to remedy this behavior? I'd be grateful for any suggestions others can offer on this question.
P.S. My scene has ~2000 lines of JS right now, but I could spend the requisite hour making a demo of the problem if that's truly necessary.
This is most likely an issue with precision of the renderer's DepthBuffer. For instance, if you initialize your PerspectiveCamera with a .near plane of 0.0001 and a .far plane of 1000000, you could get z-fighting when objects come close to each other without even touching. To avoid this, you could try a smaller near-far range so your depth precision doesn't get "spread too thin", such as 0.1-100:
var camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 100 );
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.
It seems possible to flip an axes of an orthographic camera in three, e.g. by the following code:
var tmp = camera.right;
camera.right = camera.left;
camera.left = tmp;
camera.updateProjectionMatrix();
However, this screws up the lighting, so it seems to not be supported (at least not with built in materials). Is this so? Is there another way to achieve this?
The use case I currently have is a scientific scene (loads of spheres and lines) that can be seen from either positive or negative Z direction. The requirement is that the X and Y axis point the same direction (e.g. right and up) no matter which Z-direction you are looking in. Is there an alternative solution if flipping left/right is not the way to go?
For an example of what I am talking about, see this fiddle: https://jsfiddle.net/mt0bpwcz/1/ Try double clicking the scene to switch the camera. Afterwards the lighting will be very strange (especially visible in the specular highlights).
Excuse me if this is an obvious question, I'm quite new to Three.js.
I'm trying to rotate some geometry along its Y axis, quite slowly and I'm using a rotation matrix for that.
In my machine, when setting a value smaller than 0.0076rad for the rotation, the geometry starts spinning, but when it reaches PI/2, it's not able to proceed, and stays flapping in values around PI/2.
Find an example here: http://jsfiddle.net/vn0m7h81/ , where the speed value can be set at...
// Speeds below 0.0076 cause the cube to stop spinning when reaching
// Pi/2 rotation in the Y axis. Values > 0.0075 work fine.
var rotationSpeed = 0.0075;
For incr. values bigger than 0.0075 the geometry keeps spinning forever.
What's the reason for this behavior?
Do not modify mesh.matrix directly in three.js unless you are an experienced user. Instead, update mesh.rotation or mesh.quaternion, and let the renderer update the matrix for you. You can also use mesh.rotateY( radians ).
three.js r.73
I've gone through the working live example of CombinedCamera and with inspiration I embedded combinedcamera in my work.
camera = new THREE.CombinedCamera( width /2, height/2, 45, 0.1, 1000, -1000, 1000, 1000 );
But while using Perspective Camera, my application works fine:
But The same application, while using orthographic projection doesn't work at all and it looks so weird.
Whats the problem in my code? I want the orthographic projection in all x, y and z directions on the object. How to do that?
The width and height of the CombinedCamera orthographic projection is from the intersection of a plane mid-way from the near and far planes of the perspective projection. If your object is small but close to the camera, it'll be rendered very small as in your second image.
Your settings have 0.1, 1000 as the near and far planes, so it's attempting to frame an object ~500 units from the camera, which is much larger than your object.
You have a number of options:
Use setFov or setZoom when in orthographic mode to frame your object better.
Scale up your object and place the camera/object so that its centre lies mid way from the camera's near and far plane.
Modify the camera's near and far plane so that they more closely frame your scene - e.g. if your camera is 25 units from the center of the objects, set the near and far plane distances on the camera to 0.1, 50 - the midpoint will be ~25 units and will frame your objects as desired when switching modes.
So, I was reading about clipping in this Wikipedia article. It seems pretty essential to any and all games, so, do I have to do it, or is it done automatically by Three.js, or even WebGL? Thanks!
You can pass values for the near and far clipping planes to your camera object:
var camera = new THREE.PerspectiveCamera( fov, aspect, near, far );
near and far can contain values for example near = 0.1 and far = 10000 so an object which lies between these values will be rendered.
EDIT:
near and far, represent the clipping planes for your world. In a scene with thousands of objects and textures being drawn at once, it would be taxing on the CPU and GPU to try and show everything. Even worse, it would be wasteful to draw the things you cant even see. The near clipping plane is usually relatively close to the user, whereas the far clipping plane is somewhere off in the distance. As objects cross the far plane, they spontaneously appear or disappear. Some games use fog to make the appearance and disappearance of objects more realistic.