user3525616
user3525616

Reputation: 121

How to set my camera behind my mesh

I created a city and a character in blender and imported thoses two JSON objects in my script. I want to move my character through the city and have this character at the center of my Screen. Now my problem is that my character is on the right side of my screen and not at the center. Does someone knows how to set my character at the center of my screen with my camera?

Here is a picture of my screen.

myCharacterInTheCity

    var scene, renderer, camera, lua;
    var keyboard = new THREEx.KeyboardState();
    var clock = new THREE.Clock();
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(90,window.innerWidth/window.innerHeight,0.1,50000);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor (0xffffff, 1);
    document.body.appendChild(renderer.domElement);
    var loader = new THREE.JSONLoader();
    loader.load("city.json", function(geomtry , materials){
        var material = new THREE.MeshFaceMaterial(materials);
        var city = new THREE.Mesh(geomtry,material);
        scene.add(city);
    })
    //my character
    loader.load("lua2.json", function (geometry, materials){
        var m = THREE.MeshFaceMaterial(materials);
        lua = new THREE.Mesh(geometry,m);
        //lua.position.set(0,3,0);
        lua.position.set(0,2,0);
        scene.add(lua);
    })
    camera.lookAt(scene);
        var light = new THREE.PointLight();
        //light.position.set(-100,200,100);
        light.position.set(0,500,0);
        scene.add(light);

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

        function update()
        {
            var delta = clock.getDelta();
            var moveDistance = 5 * delta; 
            var rotateAngle = Math.PI / 2 * delta;     
            // local transformations
            // move forwards/backwards/left/right
            if ( keyboard.pressed("S") )
                lua.translateZ( -moveDistance );
            if ( keyboard.pressed("Z") )
                lua.translateZ(  moveDistance );
            if ( keyboard.pressed("D") )
                lua.translateX( -moveDistance );
            if ( keyboard.pressed("Q") )
                lua.translateX(  moveDistance );
            // rotate left/right/up/down
            var rotation_matrix = new THREE.Matrix4().identity();
            if ( keyboard.pressed("Y") )
                lua.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
            if ( keyboard.pressed("B") )
                lua.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
            if ( keyboard.pressed("G") )
                lua.rotateOnAxis( new THREE.Vector3(1,0,0), rotateAngle);
            if ( keyboard.pressed("H") )
                lua.rotateOnAxis( new THREE.Vector3(1,0,0), -rotateAngle);    

            var relativeCameraOffset = new THREE.Vector3(0,0,0);
            var cameraOffset = relativeCameraOffset.applyMatrix4( lua.matrixWorld );
            camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.5,50000);
            camera.position.x = lua.position.x;
            camera.position.y = lua.position.y+1;
            camera.position.z = lua.position.z-2;
            //camera.position.x = cameraOffset.x;
            //camera.position.y = cameraOffset.y;
            //camera.position.z = cameraOffset.z;
            camera.lookAt( lua.position );
        }
        render();

Upvotes: 0

Views: 74

Answers (1)

Bartosz Krzeszewski
Bartosz Krzeszewski

Reputation: 167

You can change your camera position and rotation

camera.position.x=100
camera.rotation.x=Math.PI

Upvotes: 1

Related Questions