help please with my webGL thee.js project: pointing a camera at an .obj model

[eskimo___]

Hi everyone, some help please

 

I am trying to work out how to direct the camera directly at an obj model. I have deliberately moved the obj model off center

 

, so that when i achieve this aim, it will become centered in the frame. I've tried using:

 

 camera.lookAt( object.position ); 

 

after

 

 camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 ); 

 

but unfortunately this just renders a black screen. The code is as follows:

 

<script>

var container, stats;

var camera, scene, renderer;

//var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;


init();
animate();



function init() {

container = document.createElement( 'div' );
document.body.appendChild( container );

camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );

camera.position.z = 300;
camera.position.x = 100;
camera.position.y = 500



// scene

scene = new THREE.Scene();

var ambient = new THREE.AmbientLight( 0x444444 );
scene.add( ambient );

var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 ).normalize();
scene.add( directionalLight );

// model

var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};

var onError = function ( xhr ) {
};


THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );

var loader = new THREE.OBJMTLLoader();
loader.load( 'obj/male02/male02.obj', 'obj/male02/male02_dds.mtl', function ( object ) {

object.position.y = - 80;
object.position.x = - 80;
object.position.z = - 80;
scene.add( object );

}, onProgress, onError );

//

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );

//document.addEventListener( 'mousemove', onDocumentMouseMove, false );

//

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

}

function onWindowResize() {

windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

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

}


function animate() {

requestAnimationFrame( animate );
render();

}

function render() {

camera.lookAt( scene.position );

renderer.render( scene, camera );

}

</script>

 

any help or advice would be greatly appreciated 

 

 

[P.Uri.Tanner]

You are on the right track!

If you post code here, i would recommend putting it in CODE Tags. You can also use codepen.io or jsfiddle.net.

 

 

For camera problems: Use THREE.CameraHelper() to visualize your maincamera. Add a debug Camera to your scene.

 

I made a codepen to visualize a possible workflow/solution:

 

FULLSCREEN: http://codepen.io/Fenchurchh/full/ByexqX/

EDITOR: http://codepen.io/Fenchurchh/full/ByexqX/