Different files with different fov value

Questions
1

Hello everyone. I have multiple glb files and I want to display them one at a time. Right now, I change the file name manually. The problem is all the files have different sizes. Some height or width are too much for the screen. I want each of them accounted for around 80% of the screen. I’m not sure about this but changing fov to cater to every files is what I think that will do the trick. I can’t seem to find any example or other people having the same problem. Or maybe changing fov value isn’t the solution here. Hope someone can give some insights.

import * as THREE from "./node_modules/three/build/three.module.js";

import { OrbitControls } from "./node_modules/three/examples/jsm/controls/OrbitControls.js";

import { GLTFLoader } from "./node_modules/three/examples/jsm/loaders/GLTFLoader.js";

    var scene = new THREE.Scene();

    scene.background = new THREE.Color(0xffffff);

    //globally illuminate

    var ambient = new THREE.AmbientLight( 0xffffff, 0.1 );

    scene.add( ambient );

    

    var spotLight = new THREE.SpotLight( 0xffffff, 1 );

    spotLight.position.set( 10, 10, 10 );

    spotLight.angle = Math.PI / 4;

    spotLight.penumbra = 0.1;

    spotLight.decay = 2;

    spotLight.distance = 200;

    scene.add( spotLight );

    

    var camera = new THREE.PerspectiveCamera( 80, window.innerWidth/window.innerHeight, 0.1, 1000);

    scene.add(camera);

    /*

    var grid = new THREE.GridHelper(75, 50, 0x555555, 0x555555);

    scene.add(grid);

    */

    var renderer = new THREE.WebGLRenderer( { antialias: true } );

    renderer.setPixelRatio( window.devicePixelRatio );

    renderer.setSize( window.innerWidth, window.innerHeight );

    renderer.toneMapping = THREE.ACESFilmicToneMapping;

    renderer.toneMappingExposure = 1;

    renderer.outputEncoding = THREE.sRGBEncoding;

    document.body.appendChild(renderer.domElement);

    var loader = new GLTFLoader();

    loader.setPath("./assets/glb/");

    loader.load('window.glb', function(gltf){

        //glass transparency

        gltf.scene.traverse(function(child){

            if(child.isMesh === true){

                if(child.material.name == 'glass'){

                    child.material.transparent = true;

                    child.material.opacity = 0;

                }

            } 

        });

        //centering objects

        const box = new THREE.Box3().setFromObject(gltf.scene);

        const center = box.getCenter(new THREE.Vector3());

        gltf.scene.position.x += (gltf.scene.position.x - center.x);

        gltf.scene.position.y += (gltf.scene.position.y - center.y);

        gltf.scene.position.z += (gltf.scene.position.z - center.z);

        scene.add(gltf.scene);

        render();

    });

    var controls = new OrbitControls( camera, renderer.domElement );

    controls.addEventListener( 'change', render ); // use if there is no animation loop

    controls.minDistance = 2;

    controls.maxDistance = 10;

    controls.target.set( 0, 0, - 0.2 );

    controls.update();

     

    //window resizing

    window.addEventListener( 'resize', onWindowResize, false );

    function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;

        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

        render();

    }

    //draw scene

    function render(){

        renderer.render(scene, camera);

    };
2

Hi!
For some ideas, have a look at this topic: Does Three have any kind of independent unit? I understand that a unit in Three is abstract, but scale.set seems to be relative to the models imported size

1 Like
3

Thank you for your suggestion. The outcome is a lot better than what I had before.

So, I changed FOV to 50 and set the camera position.

var camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 1;
scene.add(camera);

Then I made some changes in GLTF Loader. I added this.

const box = new THREE.Box3().setFromObject(gltf.scene);
var size = new THREE.Vector3();
box.getSize(size);
var scaleVec = new THREE.Vector3(1,1,1).divide(size);
var scale = Math.min(scaleVec.x, Math.min(scaleVec.y, scaleVec.z));
gltf.scene.scale.setScalar(scale);

And deleted this.

const center = box.getCenter(new THREE.Vector3());
gltf.scene.position.x += (gltf.scene.position.x - center.x);
gltf.scene.position.y += (gltf.scene.position.y - center.y);
gltf.scene.position.z += (gltf.scene.position.z - center.z);

Some are not as center as I want it to be. Some are big and some are small. But it is close to what I imagine it to be. I wonder why scale part and center part don’t work together though. When I had them together, some objects were too low.

4

Update if anyone cares about this.
As I mentioned before, some were not as center as I wanted it to be. So, I added gltf.scene.position.y to change them to the place I want. They are better right now.