如何在Three.js中保持宽高比将几何体定位至底部并实现半裁切？

嘿，我来帮你搞定这个问题！首先你遇到的变形问题，核心原因是用了固定像素值（-300）来定位几何体——这个数值既没结合几何体自身尺寸，也没考虑透视相机的视场特性，窗口宽高比一变，自然就容易出现拉伸或位置偏移。下面是具体的解决方案：

问题拆解 #

你的需求是让几何体底部对齐页面底部，仅显示上半部分，但固定的position.setY(-300)没有和几何体自身尺寸绑定；另外你用的MeshPhongMaterial需要光源才能正常渲染（原代码里没加光源，可能会导致显示异常），这也是需要补全的细节。

解决方案步骤 #

1. 计算几何体真实尺寸：通过边界盒（Bounding Box）获取几何体的高度，避免用固定像素值做定位依据。
2. 基于尺寸比例定位：让几何体的中心Y坐标设为自身半高的一半（即-objectHalfHeight / 2），这样刚好能让上半部分显示在视口中，下半部分被页面底部裁切。
3. 添加必要光源：给场景添加环境光和方向光，让MeshPhongMaterial正常显示出线框效果。
4. 校准相机视角：让相机始终看向几何体中心，保证透视效果的一致性。

修改后的完整代码 #

var camera, scene, renderer;
var geometry, material, muesum;
init();
animate();

function init() {
  // 初始化透视相机
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 600;
  
  scene = new THREE.Scene();

  // 创建几何体并计算边界盒
  geometry = new THREE.IcosahedronGeometry(350, 2);
  geometry.computeBoundingBox();
  const boundingBox = geometry.boundingBox;
  const objectHalfHeight = (boundingBox.max.y - boundingBox.min.y) / 2; // 几何体半高为350

  // 初始化材质和网格
  material = new THREE.MeshPhongMaterial({ wireframe: true });
  muesum = new THREE.Mesh(geometry, material);
  scene.add(muesum);

  // 定位几何体：让上半部分显示在视口，下半部分被底部裁切
  muesum.position.setY(-objectHalfHeight / 2);
  // 让相机看向几何体中心，确保视角正确
  camera.lookAt(muesum.position);

  // 添加光源（MeshPhongMaterial必须有光源才能显示）
  const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
  scene.add(ambientLight);
  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
  directionalLight.position.set(500, 500, 500);
  scene.add(directionalLight);

  // 初始化渲染器
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);
}

window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  requestAnimationFrame(animate);
  muesum.rotation.x += 0.001;
  muesum.rotation.y += 0.002;
  renderer.clear();
  renderer.render(scene, camera);
}

关键细节说明 #

• 边界盒计算：geometry.computeBoundingBox()能精准获取几何体的尺寸范围，基于这个尺寸做定位，能保证无论窗口怎么调整，几何体的相对位置都保持一致，不会出现拉伸变形。
• 光源补全：MeshPhongMaterial依赖光照渲染，没有光源的话几何体可能会显示为黑色，添加环境光+方向光可以让线框效果正常呈现。
• 相机视角校准：camera.lookAt(muesum.position)确保相机始终聚焦在几何体中心，避免因为几何体位置变化导致的视角偏移问题。

这样修改后，几何体就能稳定地显示在页面底部，仅露出上半部分，而且无论窗口尺寸怎么变，都不会出现拉伸变形的问题啦！

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