Hi there,
I’m trying to export my glb asset from Adobe Dimensions with camera, lighting etc. The model loads fine, but when using the camera it looks extremely distorted.
Any ideas why this could be happening?
Image is below:
https://ibb.co/b7YQKrT
Thanks in advance.
The camera in the model probably has an aspect ratio that doesn’t match the canvas you’re rendering into. You’ll need to update the camera after loading, see https://threejs.org/docs/#api/en/cameras/PerspectiveCamera.
Hi @donmccurdy
Thanks very much for your reply.
Is it camera.UpdateMatrix(); I should be calling?
Edit:
I’ve also noticed this happens on glTF viewer, so not sure if it has to do with the export? Or me using the wrong camera?
Here’s my js:
// Load 3D Scene
var scene = new THREE.Scene();
// Load Camera Perspective
var camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.set( 1, 1, 20 );
// Load a Renderer
var renderer = new THREE.WebGLRenderer({ alpha: false });
renderer.setClearColor( 0xC5C5C3 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Load Light
var ambientLight = new THREE.AmbientLight( 0xcccccc );
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
scene.add( directionalLight );
// Load a glTF resource
var loader = new GLTFLoader();
loader.load(
// resource URL
'/assets/gltf/resource.glb',
// called when the resource is loaded
function ( gltf ) {
var object = gltf.scene;
camera = gltf.cameras[0];
gltf.scene.scale.set( 2, 2, 2 );
gltf.scene.position.x = 0; //Position (x = right+ left-)
gltf.scene.position.y = 0; //Position (y = up+, down-)
gltf.scene.position.z = 0; //Position (z = front +, back-)
scene.add( gltf.scene );
camera.updateMatrix()
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log(error);
console.log( 'An error happened' );
}
);
function animate() {
render();
requestAnimationFrame( animate );
}
function render() {
renderer.render( scene, camera );
}
render();
animate();
You need to update the camera.aspect property with the actual width/height ratio of your page, and then call .updateProjectionMatrix().
Thanks again for your help @donmccurdy
I’m still having trouble, as you said Im setting the aspect ratio of the camera. Then updating, still having these odd artifacts.
Below is after the glb file is loaded:
camera = gltf.cameras[0];
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
scene.add(gltf.scene);
render();
animate();
You may need to share a demo, the code above looks fine.
Hi @donmccurdy
Here’s a code pen with the glb file and the code I was talking about above.
It’s rendering without distortion, as far as I can tell:
If you’re looking for help please describe the problem and how to reproduce it. Saying “still having these odd artifacts” doesn’t seem to explain what is wrong.
If you’re referring to the Z fighting (artifacts at the edges of objects, here), the model’s camera has a camera.near property that is too small. Use something like camera.near = 1; instead. See the PerspectiveCamera documentation for more about this.
You’re initiating a camera via code on line 5 of your Codepen, but then you’re re-assigning your camera to the one that comes inside the GLTF, making your original camera useless.
Inside the loader callback, line 32, I added a more reasonable near and far values of 1 and 200, and you see the depth artifacts are all gone:
Great thank you so much for your help @marquizzo & @donmccurdy! That did the trick.
