Three.js - Set Camera position

Question

I'm struggling to guess how can I get any object loaded covering almost the full width and height of the canvas.

 <script>

        var scene               = new THREE.Scene();
        var camera              = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
        var renderer            = new THREE.WebGLRenderer();
        var loader              = new THREE.STLLoader();
        var mesh;

        renderer.setClearColor(0xFFFFFF, 1);

        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );

        loader.addEventListener( 'load', function ( event ) {
            var geometry = event.content;
            var redPhongMaterial = new THREE.MeshPhongMaterial({ color: 0xFFEA32, side: THREE.DoubleSide, ambient:0x000000});
            mesh         = new THREE.Mesh( geometry, redPhongMaterial )
            mesh.castShadow = true;
            mesh.receiveShadow = true;
            geometry.computeBoundingBox();
            var boundingBox = mesh.geometry.boundingBox.clone();
            drawBoundingBox(boundingBox, mesh.scale.x, mesh.scale.y, mesh.scale.z);
            mesh.translateX (0);
            mesh.translateY (0);
            mesh.translateZ (0);
            scene.add( mesh );

        } );
        loader.addEventListener( 'progress', function ( event ) {
            document.getElementById('progress').innerHTML = 'Progress: '+event.loaded+'%';
        });
        loader.addEventListener( 'error', function ( event ) {
            alert( event.message );
        });
        loader.load( 'pet.stl' );

        camera.position.set( 15, -10, 120 );

        render();

        function render() {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }

    </script>

I think I should set camera position to a certainly x, y and z but do not know.

How can I accomplish this?

There are several resources to solve your problem: http://stackoverflow.com/questions/14614252/how-to-fit-camera-to-object, http://stackoverflow.com/questions/16462848/three-js-zoom-to-fit-width-of-objects-ignoring-height, http://stackoverflow.com/questions/13572258/three-js-algorithm-to-set-the-camera-so-the-whole-scene-shows, http://stackoverflow.com/questions/2866350/move-camera-to-fit-3d-scene, just to name a few. — gaitat, Feb 20 '14 at 00:57
@gaitat what do you do when you have a landscape image on a mobile ? it has to be handled differently than all of those examples - which will just gives a "fit height" answer — Ben, Dec 28 '14 at 16:29
you probably want to "fit" the shortest of the two. the width or the height of your device. the implementation should not depend on the type of the device. when you get a resize event you should choose what to "fit" — gaitat, Dec 29 '14 at 16:16

score 2 · Answer 1 · edited Nov 29 '17 at 11:06

2

camera.position.set(0,0,Math.max(x*3,ys*3,z*3));

edited Nov 29 '17 at 11:06

Toastrackenigma

7,604
4
45
55

answered Feb 01 '16 at 08:31

Chiedo

7,288
3
26
22

Three.js - Set Camera position

1 Answers1