I'm struggling to figure out how to load an object that covers almost the entire 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 believe adjusting the camera's position along the x, y, and z axes may help, but I'm unsure.
Any suggestions on how to achieve this?