咱们先排查你代码里可能存在的几个常见问题，再给出可行的实现方案：

一、你的代码可能存在的问题 #

• 缺少动画渲染循环：Three.js里场景的任何变化（比如相机旋转）都需要在requestAnimationFrame驱动的循环中重新渲染画面，否则旋转效果不会显示出来。
• 旋转逻辑错误：可能你在leftMode里没有正确修改相机的旋转属性——比如直接赋值而非累加旋转量，或者用了错误的旋转轴，甚至没把角度转换成Three.js要求的弧度单位。
• 点击事件未正确绑定：按钮的点击事件可能没关联到leftMode函数，导致函数根本没被调用。

二、正确的实现步骤和代码示例 #

1. 先搭好动画渲染循环 #

这是Three.js场景更新的基础，没有它任何视觉变化都不会生效：

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera3D); // 这里的renderer是你的Three.js渲染器实例
}
animate();

2. 实现正确的leftMode旋转函数 #

Three.js的旋转单位是弧度，90度对应的弧度是Math.PI / 2。如果是左右旋转相机，通常绕Y轴旋转最符合需求：

function leftMode() {
  // 每次点击绕Y轴逆时针旋转90度，累加旋转量
  camera3D.rotation.y += Math.PI / 2;
  // 如果觉得旋转方向不对，把加号改成减号即可
}

3. 绑定按钮点击事件 #

确保你的按钮元素正确关联到旋转函数：

<button id="leftBtn">左旋转</button>

document.getElementById('leftBtn').addEventListener('click', leftMode);

4. 完整可运行的代码片段示例 #

// 初始化相机（你的原有代码）
const angle = 45;
const width = window.innerWidth;
const height = window.innerHeight;
const near = 1;
const far = 10000;
const camera3D = new THREE.PerspectiveCamera(angle, width / height, near, far);
camera3D.position.set(0, 10, 500);

// 初始化场景和渲染器
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);

// 地板（你的原有代码）
const geometry = new THREE.PlaneGeometry(10000, 10000, 10, 10);
const material = new THREE.MeshBasicMaterial({ color: 0x444444 });
const floor = new THREE.Mesh(geometry, material);
floor.rotation.x = -Math.PI / 2; // 让地板平铺在地面
scene.add(floor);

// 旋转函数
function leftMode() {
  camera3D.rotation.y += Math.PI / 2;
}

// 绑定按钮事件
document.getElementById('leftBtn').addEventListener('click', leftMode);

// 动画循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera3D);
}
animate();

三、如果还是没生效的排查点 #

• 打开浏览器控制台，检查有没有报错（比如renderer或scene未定义、按钮DOM元素找不到等）。
• 在leftMode函数里加一行console.log(camera3D.rotation.y)，点击按钮后看控制台是否输出变化的数值，确认函数是否被调用、旋转量是否正确累加。
• 检查相机是否有父元素：如果相机被添加到了其他3D对象下，旋转父元素可能比直接旋转相机更合适。

内容的提问来源于stack exchange，提问作者karthick187