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;
            geometryputeBoundingBox();
            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 acplish this?

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.puteBoundingBox();
            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 acplish this?

• javascript
• three.js

• There are several resources to solve your problem: stackoverflow./questions/14614252/…, stackoverflow./questions/16462848/…, stackoverflow./questions/13572258/…, stackoverflow./questions/2866350/move-camera-to-fit-3d-scene, just to name a few. – gaitat Commented Feb 20, 2014 at 0: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 Commented Dec 28, 2014 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 Commented Dec 29, 2014 at 16:16

1 Answer 1

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