Three.js加载GLTF模型添加到3D地球场景后Chrome中无法显示求助

问题排查与修复方案 #

1 核心问题：坐标单位不匹配 #

你渲染函数中相机的x、z轴坐标取值范围只有[-2,2]，说明相机距离地球原点的距离始终为2个单位，而你将GLTF模型放在了坐标(500, 500, 600)的位置，完全超出了相机的可视范围，自然无法显示。

修复方法：调整模型位置到相机可视范围内，同时新增缩放配置适配模型尺寸：

gltf.scene.position.set(0, 0, 3); // 放在地球前方3个单位处，和相机距离匹配
gltf.scene.scale.set(0.1, 0.1, 0.1); // 可根据实际模型尺寸调整缩放值，避免过大/过小
scene.add(gltf.scene);

2 检查场景光照配置 #

GLTF默认使用PBR材质，必须搭配光源才能正常显示，如果场景内没有添加光源，模型会呈现纯黑色，和背景融合后无法观察到。请确认场景初始化阶段已添加以下配置：

// 环境光：提供基础全局照明
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
// 方向光：模拟直射光源，呈现材质明暗细节
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 3, 5);
scene.add(directionalLight);

3 确认相机裁剪参数 #

如果你使用的是透视相机PerspectiveCamera，请检查远裁剪面far参数是否大于模型到相机的距离，避免模型被裁剪：

// 示例配置，far值需大于场景内最远物体的距离
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

4 调试辅助建议 #

• 打开你注释掉的console.log('GLTF:', gltf)代码，确认控制台无404报错、模型确实加载成功
• 临时关闭相机自动旋转逻辑，添加OrbitControls轨道控制器，手动拖动视角查找模型，确认是否存在视野外的问题：

// 引入控制器后初始化
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染函数内新增更新逻辑
controls.update();

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