I designed a city and a character using Blender, then imported both as JSON objects into my script. My objective is to navigate my character through the city with the character always centered on the screen. However, I'm facing an issue where my character appears on the right side of the screen instead of the center. Can anyone provide guidance on how to position my character at the center of the screen with the camera?
Below is an image of my current screen layout.
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();