Three.js如何实现Mesh网格左对齐同时保障响应式自适应效果

你当前为Mesh设置的是固定世界坐标cube.position.x = -20，窗口大小变化时，相机的可视宽高比会同步变化，固定坐标无法匹配动态的可视范围，自然无法保持左对齐。按以下步骤修改即可实现效果：

实现逻辑 #

• 封装坐标计算逻辑，根据当前相机参数实时计算Mesh左对齐需要的x坐标
• 监听窗口resize事件，触发时同步更新相机参数、渲染器尺寸、Mesh的x坐标
• 初始化时执行一次计算逻辑，保证首次加载就对齐正确

完整修改代码 #

这里默认你使用的是Three.js常用的PerspectiveCamera透视相机，可根据你实际的相机参数调整：

// 相机初始化（示例，替换为你自己的相机配置即可）
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.z = 50 // 此处z值请和你实际设置的相机z坐标保持一致

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const scene = new THREE.Scene()
// 你的纹理定义cubetexture这里保持原有逻辑即可

const geometry = new THREE.BoxGeometry( 29, 20, 3  )
const material = new THREE.MeshBasicMaterial( { map: cubetexture } );
const cube = new THREE.Mesh( geometry, material );
scene.add(cube)

// 新增：计算立方体左对齐x坐标的函数
function updateCubePosition() {
  // 计算当前相机视锥体在相机z位置对应的可视宽度
  const viewWidth = 2 * Math.tan(THREE.MathUtils.degToRad(camera.fov / 2)) * camera.position.z * camera.aspect
  // 左对齐逻辑：x坐标 = 负的(可视宽度一半 - 立方体宽度的一半)，你的立方体宽度为29，半宽为14.5
  cube.position.x = -(viewWidth / 2 - 14.5)
}

// 新增：窗口大小变化监听
window.addEventListener('resize', () => {
  // 更新相机宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  // 更新渲染器尺寸
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 重新计算立方体位置
  updateCubePosition()
})

// 初始化时执行一次对齐
updateCubePosition()

var clock = new THREE.Clock();

function animate() {
  requestAnimationFrame( animate );
  const time = clock.getElapsedTime();

  cube.position.y = Math.cos( time ) * 2;
  cube.rotateY(Math.cos( time ) * 0.002)
  renderer.render( scene, camera );
}

animate()

如果你使用的是正交相机OrthographicCamera，逻辑更简单，直接在resize时设置cube.position.x = camera.left + 14.5即可。

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