Three.js相机初始朝向反向，滚动后恢复正常的问题求助

问题原因 #

你遇到的问题核心是初始相机参数和滚动控制逻辑不一致：

• 你手动设置了camera.position.setZ(30)，但滚动函数moveCamera在页面未滚动时（document.body.getBoundingClientRect().top = 0），会把camera.position.z重置为0，旋转参数也为0。
• 初始状态下相机在Z=30位置，默认朝向-Z轴（看向原点），和滚动后相机的位置/朝向逻辑不匹配，导致视觉上“朝向相反”；第一次滚动后，相机参数被滚动函数修正，就恢复正常了。

解决方案 #

有两种简单修复方式，选一种适配你的需求：

方式1：初始化时同步滚动逻辑

移除手动设置的camera.position.setZ(30)，初始化完成后手动调用一次moveCamera，让相机初始状态完全遵循滚动逻辑：

const scene = new THREE.Scene();

//Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

//Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);

// 初始化时调用一次moveCamera，同步初始参数
moveCamera();

renderer.render(scene, camera);

//Scrolling to move
function moveCamera(){
  const t = document.body.getBoundingClientRect().top;
 
  camera.position.z = t * -0.01;
  camera.position.x = t * -0.0002;
  camera.rotation.y = t * -0.0002;
}

document.body.onscroll = moveCamera

方式2：调整滚动逻辑适配初始位置

如果希望相机初始就在Z=30的位置，修改滚动函数，让初始状态（t=0）时保持Z=30，滚动时基于这个初始值变化：

const scene = new THREE.Scene();

//Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

//Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.querySelector('#bg'),
});

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
camera.position.setZ(30);

// 初始化调用一次，确保参数正确
moveCamera();

renderer.render(scene, camera);

//Scrolling to move
function moveCamera(){
  const t = document.body.getBoundingClientRect().top;
 
  // 初始t=0时z=30，滚动时t为负，z随滚动调整（符号可根据需求修改）
  camera.position.z = 30 + (t * -0.01);
  camera.position.x = t * -0.0002;
  camera.rotation.y = t * -0.0002;
}

document.body.onscroll = moveCamera

补充说明 #

Three.js的PerspectiveCamera默认朝向是**-Z轴**（看向坐标原点），如果你的场景内容在+Z方向，初始相机在Z=30时会背向内容，也会造成“朝向相反”的视觉效果。这种情况可以直接让相机看向+Z方向：

// 让相机看向+Z方向的某个点，比如(0,0,100)
camera.lookAt(0, 0, 100);

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