I'm working with this gltf model: http://virtualvizcaya.org/pages/1916barge1.html using Three.js and Potree. But the model is flickering. I've read these related posts Flickering planes and Texture/model flickering in distance (3D).
If I understood it correctly, it requires the PerspectiveCamera's near and far plane arguments to be distant from each other, but my attempt on this hasn't fix this problem.
Please help! (I'm pretty new on three.js and potree btw)
Like #Brakebein mentioned, this is called z-fighting.
If you use WebGLRenderer, you could try:
var renderer = new THREE.WebGLRenderer({
logarithmicDepthBuffer: true
});
In my viewer (http://gltf-viewer.donmccurdy.com/) I've used the following code to configure the camera's near/far planes:
const object; // my model
const box = new THREE.Box3().setFromObject(object);
const size = box.getSize(new THREE.Vector3()).length();
const center = box.getCenter(new THREE.Vector3());
this.controls.reset();
object.position.x += (object.position.x - center.x);
object.position.y += (object.position.y - center.y);
object.position.z += (object.position.z - center.z);
controls.maxDistance = size * 10;
camera.near = size / 100;
camera.far = size * 100;
camera.updateProjectionMatrix();
There is some dependency here on scene scale and hardware precision — in your code you're scaling the model up significantly, and may want to try bringing the camera closer instead. But I'm not familiar with Potree, so I'm not sure what it might be doing that would give different results than using three.js alone.
Related
I am adding a plane to the scene like this:
// Camera
this.three.camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 60);
// Plane
const planeGeometry = new THREE.PlaneBufferGeometry(1,1,this.options.planeSegments,this.options.planeSegments);
const planeMat = new THREE.ShaderMaterial( ... )
this.three.plane = new THREE.Mesh(planeGeometry,planeMat);
this.three.scene.add(this.three.plane);
Pretty basic. I am than trying to find out how I have to move the plane in the Z axis for it to fill the browser-viewport. For that,
// See attachment "solving for this" is closeZ
const closeZ = 0.5 / Math.tan((this.three.camera.fov/2.0) * Math.PI / 180.0);
this.uniforms.uZMax = new THREE.Uniform(this.three.camera.position.z - closeZ);
So now I know in my shader how much I can add to Z to make the plane fill the viewport. Vertex Shader looks like this:
uniform float uZMax;
void main() {
vec3 pos = (position.xy, uZMax);
gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1 );
}
This actually zoom the plane to fill the viewport, but in Y-Axis, not in X-Axis.
I would like to discover why my math is referring to the Y-Axis and how I need to transform it, so the plane will fill the viewport width instead of it's height?
Edit:
I'm trying to achieve something like this https://tympanus.net/Tutorials/GridToFullscreenAnimations/index4.html - But in the given example they're just scaling the x- and y-pixels to fill the screen and therefore no actual 3d - and therefore again no lighting is going on.
I want to actually move the plane towards the camera using different z-values so I can calculate surface normals to then again calculate lighting in the fragment shader by how aligned the normal is with the light direction - like it's done in raymarching.
You can easily achieve such a fullscreen effect by using the following setup:
const camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
const geometry = new THREE.PlaneBufferGeometry( 2, 2 );
When creating a mesh with this geometry and a custom shader material, the orthographic camera will ensure the intended fullscreen effect. This approach is used in all post-processing example where the entire viewport has to be filled with a single quad.
I figured it out, and as suspected it has to do with the aspect ratio passed to the camera. For anyone looking for a solution after me, here is how it works:
I wrongly assumed that the field-of-value for the camera is the same in all directions. But the FOV is referring to the Y-Axis FOV, so we have to convert the camera-fov to the x-axis also:
function getXFOV() {
// Convert angle to radiant
const FOV = this.three.camera.fov;
let yFovRadiant = FOV * Math.PI/180;
// Calculate X-FOV Radiant
let xFovRadiant = 2 * Math.atan( Math.tan(yFovRadiant/2) * (window.innerWidth / window.innerHeight));
// Convert back to angle
let xFovAngle = xFovRadiant * 180/Math.PI;
return xFovAngle;
}
And then we simply use that angle in in the closeZ-calculation instead of the camera's fov. Now it snaps to the window-width.
const closeZ = 0.5 / Math.tan((this.getXFOV()) * Math.PI / 180.0);
this.uniforms.uZMax = new THREE.Uniform(this.three.camera.position.z - closeZ);
I'm creating a game level page using three js. Here I used mapcontrols for user control. In this when I click and drag any part of the screen, the object gets translated (as per my wish). But when I move along the Z axis, the objects move along z-axis which I need to block.
I just want to make the scene like a horizontal carousel in normal html (literally)
I tried some properties of OrbitControls which is given in threejs docs.
https://threejs.org/docs/index.html#examples/en/controls/OrbitControls
Here is the code I tried
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
var mapControls = new THREE.MapControls( camera, renderer.domElement );
mapControls.enableDamping = true;
mapControls.enableRotate = false;
mapControls.enableZoom = false;
To create a carousel-like experience, you don't need orbit controls, you only need to move the camera while looking at your object is advancing through the carousel, like the typical platform games.
I have created this fiddle with an example with an sphere moving along the x axis and the camera following it.
and the relevant code is basically on the render method:
function render() {
requestAnimationFrame(render);
mesh.position.x -= 0.1;
camera.lookAt(mesh.position);
camera.position.x -= 0.1;
renderer.render(scene, camera);
}
If you want to still playing with OrbitControls and fix the axes, you need to play with minPolarAngle and maxPolarAngle, that will block vertical axis if you set the same value for both.
controls.maxPolarAngle = Math.PI / 2;
controls.minPolarAngle = Math.PI / 2;
but that gives no perspective at all, so I would use:
controls.maxPolarAngle = Math.PI / 2.2;
controls.minPolarAngle = Math.PI / 2.2;
Then you have to play with the horizontal perspective, for that you need to set minAzimuthAngle and maxAzimuthAngle between -2 PI and +2 PI...:
controls.minAzimuthAngle = -Math.PI * 1.1;
controls.maxAzimuthAngle = Math.PI * 1.1;
This will slightly turn your camera angle:
Then, using only OrbitControls you will need to move the rest of the objects in the scene, so instead of moving the sphere, you will need to move conceptually the "floor".
If this solution solves your question, please mark the answer as answer accepted, in that way it will also help other users to know it was the right solution.
I am trying to load(dynamically) object files using THREE.OBJLoader and place them in the center of a scene(or canvas), so that the whole object can be visible in the Camera. Objects are dynamic, so I don't have fixed height or width data.
What I have got:
What I want:
What I have referred to get to this point:
Three.js zoom to fit width of objects (ignoring height)
How to Fit Camera to Object
Smart Centering and Scaling after Model Import in three.js
Adjusting camera for visible Three.js shape
Calculate camera zoom required for object to fit in screen height
Move camera to fit 3D scene
Three.js calculate object distance required to fill screen
How to calculate the z-distance of a camera to view an image at 100% of its original scale in a 3D space
Code:
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
controls = new THREE.TrackballControls(camera);
controls.rotateSpeed = 5.0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
// scene
scene = new THREE.Scene();
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setBaseUrl(path);
mtlLoader.setPath(path);
mtlLoader.setMaterialOptions({
ignoreZeroRGBs: true
});
mtlLoader.load(path, function(materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath(path);
objLoader.load(path, function(object) {
var helperBox = new THREE.BoundingBoxHelper(object, 0x888888);
helperBox.update();
scene.add(helperBox);
//Scene
scene.add(object);
var boxFrmScene = new THREE.Box3().setFromObject(scene);
var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x);
var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
var pos = scene.position;
var boundingSphere = boxFrmScene.getBoundingSphere();
var center = boundingSphere.center;
camera.position.set(center.x, center.y, (dist * 1.1));
camera.lookAt(pos);
}, function(error) {
console.log(error);
});
}, function(error) {
console.log(error);
});
The deadpool object I used is from here : http://tf3dm.com/3d-model/deadpool-42722.html . I don't know if I have been reading the right questions. I would be very glad if someone can point me in the right direction. Thanks in advance.
PS: I'm not good with 3D maths.
Edit:
I have tried solution given at this:How to Fit Camera to Object but it has not solved my issue. In fact its flipping my object upside down. I am trying to position the object to center of the camera.
Edit 2: I have partially fixed this. Now the object is within the camera frustum and fully visible. Now I need to find a way to center it. I changed the whole code below scene.add(object);
var pos = scene.position;
camera.position.set(pos.x, pos.y, 100);
camera.lookAt(pos);
var boxFrmScene = new THREE.Box3().setFromObject(scene);
var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x);
var fov = camera.fov * (Math.PI / 180);
var distance = Math.abs(height / Math.sin(fov / 2));
camera.position.set(pos.x, pos.y, distance + (height / 2));
camera.updateProjectionMatrix();
Try adding this code after creating mesh,
var box = new THREE.Box3().setFromObject(mesh);
box.center(mesh.position);
mesh.localToWorld(box);
mesh.position.multiplyScalar(-1);
This will bring your object to the center of the screen
I am using the following code to scale and center a msgpack compressed object loaded using the ObjectLoader and it is not working. I think that my object has a rotation on it, and hence causing weird behaviors. On some objects, it successfully centers, but on others the centering is offset and scaling isn't right either.
In this snippet, result is the scene from the ObjectLoader. My thought was that the object was not very well formed, but I'm not sure. I wanted the table on the image or any other user entered mesh to be on the top of the grid, centered and scaled so that the maximum size is 1 unit.
Each square measures 0.25, the axis are at 0,0,0 http://i.stack.imgur.com/fkKYC.png
// result is a threejs scene
var geometry = result.children[0].geometry;
var mesh = result.children[0];
geometry.computeBoundingBox();
var middle = new THREE.Vector3();
middle.x = ( geometry.boundingBox.max.x + geometry.boundingBox.min.x ) / 2;
middle.y = -geometry.boundingBox.min.y;
middle.z = ( geometry.boundingBox.max.z + geometry.boundingBox.min.z ) / 2;
middle.negate();
mesh.position.copy(middle);
// scales the mesh up to maxsize
var maxSize = 1;
// gets the biggest axis
var maxVal = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
if (maxVal < geometry.boundingBox.max.y - geometry.boundingBox.min.y) {
maxVal = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
}
if (maxVal < geometry.boundingBox.max.z - geometry.boundingBox.min.z) {
maxVal = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
// scales the current size proportional to the maxval, times maxsize
mesh.scale.divideScalar(maxVal * maxSize);
self.scene.add(result);
Instead of calling geometry.computeBoundingBox(); call geometry.center(); then you don't need the middle.x or middle.z and you can just call mesh.translateY() rather than fiddling with middle at all
I'm making a model of the Solar System. This is my current metric:
scale = 0.001;
// 1 unit - 1 kilometer
var AU = 149597871 * scale;
This is how i define the camera, renderer and controls:
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1 * scale, 0.1 * AU);
renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
controls = new THREE.OrbitControls(camera, renderer.domElement);
Then i give the user the option to jump between the objects so this is how i set the camera after user selects a planet/moon:
function cameraGoTo() {
for (var i = scene.children.length - 1; i >= 0 ; i--) {
var obj = scene.children[i];
if (obj.name == parameters.selected) {
controls.target = obj.position;
camera.position.copy(obj.position);
camera.position.y += obj.radius * 2;
}
}
}
The problem is that for small planets/moons ( <= 1000 km in radius) camera is shaking while rotating around the object. I have only basic knowledge of computer graphics so i don't know either this is the problem of Orbit Controls or it has something to with renderer itself...so I've tried to set logarithmicDepthBuffer = true but it didn't help. Also trying different scale didn't change anything.
Thank in advance for any help/clues.
EDIT:
Here's the fiddle:
http://jsfiddle.net/twxyz/8kxcdkjj/
You can see that shaking increases with any of the following:
the smaller the object,
the further the object from the point of origin,
What is the cause of this? It clearly seems it has nothing to do with the camera near/far spectrum values but is related to the distance the objects are from the center of the scene.
I've come up with the solution.
My problem was with the floating point precision errors when dealing with objects far from the point of origin. This turns out to be a very known problem and there are various solutions. I've used this one:
http://answers.unity3d.com/questions/54739/any-solution-for-extreamly-large-gameworlds-single.html
What happens is basically instead of moving the camera/player, we transform whole scene relative to the camera/player that is always at the point of origin. In this case, Orbit Controls' target is always point of origin.