如何将我的相机设置在我的网格后面
How to set my camera behind my mesh
我在搅拌机中创建了一个城市和一个角色,并在我的脚本中导入了这两个 JSON 对象。我想移动我的角色穿过城市,并将这个角色放在屏幕的中心。现在我的问题是我的角色在屏幕的右侧而不是中心。有人知道如何用我的相机将我的角色设置在屏幕中央吗?
这是我的屏幕图片。
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();
您可以更改相机位置和旋转角度
camera.position.x=100
camera.rotation.x=Math.PI
我在搅拌机中创建了一个城市和一个角色,并在我的脚本中导入了这两个 JSON 对象。我想移动我的角色穿过城市,并将这个角色放在屏幕的中心。现在我的问题是我的角色在屏幕的右侧而不是中心。有人知道如何用我的相机将我的角色设置在屏幕中央吗?
这是我的屏幕图片。
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();
您可以更改相机位置和旋转角度
camera.position.x=100
camera.rotation.x=Math.PI