Match threejs and blender cameras

Questions
,
1

Hi there!
For my project I need to have the exact same position and rotation of an ortographic camera in both blender and three (because i have 2D sprites that work only at certain angles).
Is there a way to achieve that? Or is it possible to export the camera from blender and use that in three?

Thanks in advance (:

2

Check the “Cameras” checkbox in the exporter… then find your camera in the GLB with getObjectByName(‘Camera’)

The object you find won’t be an actual camera I think but it will be an object with a position and rotation you can copy into your actual camera in threejs.

image
image669×638 57.2 KB

1 Like
3

that’s a great idea, i’ll try asap, thanks so much!

4

it’s an actual THREE camera that you can use to render with

made a tool once that extracts it

2 Likes
5

I did this to retrieve the data from the console, I’m not really sure how to use getObjectByName, but anyway:

loader.load('../public/camera_prova.glb', function(gltf) {
        gltf.scene.traverse((child) => {
            if (child.name === 'Camera') {
                console.log('Camera position:', child.position);
                console.log('Camera rotation:', child.rotation);
            }
        });
        
        scene.add(gltf.scene);
    }, undefined, function(error) {
        console.error('Error loading GLB:', error);
    });

Then I put the data in my three camera:

    const camera = new THREE.OrthographicCamera(- f,  f, f, - f, 1, 1000);
    const cameraPosition = new THREE.Vector3(4.142228603363037, 9.353914260864258, 7.234145164489746);
    const cameraRotation = new THREE.Euler(
        -0.8922362630407233, // x 
        0.49492521545985113, // y 
        0.5323526488557353, // z 
        'XYZ' 
    );

    camera.position.copy(cameraPosition);
    camera.rotation.set(cameraRotation.x, cameraRotation.y, cameraRotation.z);
    scene.add(camera);

It seems to be working overall but I’m not really sure it’s exactly the same angle yet. Plus, the Suzanne I used to test looks a bit deformed, but it’s a start!
Another problem now is that the camera is cutting off the ground mesh and the obj.

I have changed my OrtographicCamera Near param like this but I don’t think it’s an optimal solution:

const camera = new THREE.OrthographicCamera(- f,  f, f, - f, -40, 1000);

I’ll continue to test, I will surely take a look at what @drcmda linked, it looks fantastic.

Thanks again!

///
[EDIT]
///

    const w = window.innerWidth;
    const h = window.innerHeight;
    const f = 20;
    
    const camera = new THREE.OrthographicCamera(-w/f, w/f, h/f, -h/f, -40, 100);
    const cameraPosition = new THREE.Vector3(4.142, 9.354, 7.234);
    const cameraRotation = new THREE.Euler(
        -0.89, 
        0.45, 
        0.53, 
        'XYZ' 
    );

    camera.position.copy(cameraPosition);
    camera.rotation.set(cameraRotation.x, cameraRotation.y, cameraRotation.z);
    scene.add(camera);

I saw that using gltfjsx the one was the same as the ones I retrieved from the console so I just used those in my three camera.
Models were squished because i didn’t add the window.innerWidth etc

6

That’s really helpful, thank you!