three.js第三人称行走

要在Three.js中实现第三人称行走效果，你需要结合相机控制和角色模型的移动。下面是一个简单的示例代码，展示了如何实现基本的第三人称行走效果：

// 创建一个场景
var scene = new THREE.Scene();

// 创建一个相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 2, 5); // 设置相机的初始位置

// 创建一个渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建一个控制器
var controls = new THREE.OrbitControls(camera, renderer.domElement);

// 创建一个平面作为地面
var groundGeometry = new THREE.PlaneGeometry(10, 10);
var groundMaterial = new THREE.MeshBasicMaterial({ color: 0x999999 });
var ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2; // 将地面置于水平方向
scene.add(ground);

// 创建一个角色模型
var characterGeometry = new THREE.BoxGeometry(1, 2, 1);
var characterMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var character = new THREE.Mesh(characterGeometry, characterMaterial);
character.position.y = 1; // 将角色模型抬高一点，使其站在地面上
scene.add(character);

// 监听键盘按键事件
document.addEventListener('keydown', function(event) {
  var keyCode = event.keyCode;
  
  // 根据按键来移动角色模型
  switch (keyCode) {
    case 87: // W键，向前移动
      character.position.z -= 0.1;
      break;
    case 83: // S键，向后移动
      character.position.z += 0.1;
      break;
    case 65: // A键，向左移动
      character.position.x -= 0.1;
      break;
    case 68: // D键，向右移动
      character.position.x += 0.1;
      break;
  }
});

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

  // 更新控制器
  controls.update();

  renderer.render(scene, camera);
}
animate();

在这个例子中，我们创建了一个场景、相机、渲染器和一个简单的地面模型和角色模型。通过监听键盘按键事件，我们可以根据按键来移动角色模型的位置。使用OrbitControls控制器可以让你通过鼠标来控制相机的位置和方向。

你可以根据自己的需求和场景的复杂性进行调整和扩展。希望这对你有所帮助！