目前我有：
<html>
<head>
<title>Collision Detection (Three.js)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="js/libs/Three.js"></script>
<script src="js/libs/Detector.js"></script>
<script src="js/libs/Stats.js"></script>
<script src="js/libs/OrbitControls.js"></script>
<script src="js/libs/THREEx.KeyboardState.js"></script>
<script src="js/libs/THREEx.FullScreen.js"></script>
<script src="js/libs/THREEx.WindowResize.js"></script>
<!-- ------------------------------------------------------------ -->
<div id="ThreeJS" ></div>
<script>
var main = new function()
{
this.SCREEN_WIDTH = window.innerWidth;
this.SCREEN_HEIGHT = window.innerHeight;
this.VIEW_ANGLE = 45;
this.ASPECT = this.SCREEN_WIDTH / this.SCREEN_HEIGHT;
this.NEAR = 0.1;
this.FAR = 20000;
this.keyboard = new THREEx.KeyboardState();
this.clock = new THREE.Clock();
this.htmlContainer = null;
this.scene = null;
this.renderer = null;
this.controls = null;
//models
this.player = null;
this.main = function()
{
this.setScene();
this.setCamera();
this.setRenderer();
this.setEvents();
this.setControls();
this.setStats();
this.setLight();
this.setFloor();
this.setSky();
this.setPlayer();
};
this.animate = function()
{
requestAnimationFrame( main.animate );
main.renderer.render( main.scene, main.camera );
main.runListener();
//this.camera.position. = 0;
};
this.runListener = function()
{
var delta = this.clock.getDelta(); // seconds.
var moveDistance = 200 * delta; // 200 pixels per second
var rotateAngle = Math.PI / 2 * delta; // pi/2 radians (90 degrees) per second
// move forwards/backwards/left/right
if ( this.keyboard.pressed("W") )
this.player.translateZ( -moveDistance );
if ( this.keyboard.pressed("S") )
this.player.translateZ( moveDistance );
if ( this.keyboard.pressed("Q") )
this.player.translateX( -moveDistance );
if ( this.keyboard.pressed("E") )
this.player.translateX( moveDistance );
// rotate left/right/up/down
if ( this.keyboard.pressed("A") )
this.player.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
if ( this.keyboard.pressed("D") )
this.player.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
var relativeCameraOffset = new THREE.Vector3(0,150,400);
var cameraOffset = relativeCameraOffset.applyMatrix4( this.player.matrixWorld );
this.camera.position.x = cameraOffset.x;
this.camera.position.y = cameraOffset.y;
this.camera.position.z = cameraOffset.z;
this.camera.lookAt( this.player.position );
this.camera.rotateOnAxis( new THREE.Vector3(0,1,0), 0 );
//this.camera.rotation.y = 0;
//this.camera.children[0].rotation.x = 0;
//yaw =
//this.controls.update();
this.stats.update();
};
this.setPlayer = function()
{
var cubeGeometry = new THREE.CubeGeometry(50,50,50,1,1,1);
var wireMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe:true } );
this.player = new THREE.Mesh( cubeGeometry, wireMaterial );
this.player.position.set(0, 25.1, 0);
//this.player.add( this.camera );
this.scene.add( this.player );
};
this.setRenderer = function()
{
if ( Detector.webgl )
this.renderer = new THREE.WebGLRenderer( {antialias:true} );
else
this.renderer = new THREE.CanvasRenderer();
this.renderer.setSize( this.SCREEN_WIDTH, this.SCREEN_HEIGHT );
this.htmlContainer = document.getElementById( 'ThreeJS' );
this.htmlContainer.appendChild( this.renderer.domElement );
};
this.setCamera = function()
{
this.camera = new THREE.PerspectiveCamera( this.VIEW_ANGLE, this.ASPECT, this.NEAR, this.FAR );
this.camera.noRotate = true;
this.scene.add( this.camera );
};
this.setScene = function()
{
this.scene = new THREE.Scene();
};
this.setEvents = function()
{
THREEx.WindowResize( this.renderer, this.camera );
THREEx.FullScreen.bindKey({ charCode: 'm'.charCodeAt(0) });
};
this.setControls = function()
{
this.controls = new THREE.OrbitControls( this.camera, this.renderer.domElement );
};
this.setLight = function()
{
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
this.scene.add(light);
};
this.setStats = function()
{
this.stats = new Stats();
this.stats.domElement.style.position = 'absolute';
this.stats.domElement.style.bottom = '0px';
this.stats.domElement.style.zIndex = 100;
this.htmlContainer.appendChild( this.stats.domElement );
};
this.setFloor = function()
{
var floorMaterial = new THREE.MeshBasicMaterial( {color:0x444444, side:THREE.DoubleSide} );
var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
this.scene.add( floor );
};
this.setSky = function()
{
var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
//this.scene.add(skyBox);
};
};
main.main();
main.animate();
</script>
</body>
</html>
此示例将感觉像FPS（与密钥WASD，QE一起使用）。我正在尝试这个数字，如何在不旋转相机的情况下使用相机跟踪物体，在您看到的当前样本中：
this.camera.lookAt( this.player.position );
this.camera.rotateOnAxis( new THREE.Vector3(0,1,0), 0 );
在查看“播放器”后，我希望相机跟随对象但没有旋转。这个目前没有用，有什么想法吗？
**编辑：已解决：
if ( this.keyboard.pressed("D") )
this.player.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
/*
var relativeCameraOffset = new THREE.Vector3(0,150,400);
var cameraOffset = relativeCameraOffset.applyMatrix4( this.player.matrixWorld );
this.camera.position.x = cameraOffset.x;
this.camera.position.y = cameraOffset.y;
this.camera.position.z = cameraOffset.z;
*/
this.camera.position.x = this.player.position.x;
this.camera.position.y = this.player.position.y+150;
this.camera.position.z = this.player.position.z+400;
this.camera.lookAt( this.player.position );
//this.controls.update();
this.stats.update();