blender 导出的模型在 three.js 中不可见，通常由光照不足、场景背景为黑色、相机视角或渲染时机不当导致；本文提供完整调试方案，涵盖环境光设置、背景色、渲染循环及常见陷阱。
blender 导出的模型在 three.js 中不可见，通常由光照不足、场景背景为黑色、相机视角或渲染时机不当导致；本文提供完整调试方案，涵盖环境光设置、背景色、渲染循环及常见陷阱。
在 Three.js 中加载 Blender 创建的 .glb 模型（如 scene.glb）后仅显示黑屏，是初学者高频问题。根本原因往往不是模型未加载成功（控制台日志显示“100% loaded”即已解析），而是场景缺乏有效光照、背景与模型同为黑色、或渲染未持续执行。你当前代码存在几个关键疏漏：
✅ 1. 缺少渲染循环（最常见致命错误）
你的代码只调用了一次 renderer.render(scene, camera)，而 Three.js 需要持续重绘以响应模型加载完成、动画更新等事件。必须使用 requestAnimationFrame 启动渲染循环：
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate(); // 启动循环
✅ 2. 光照严重不足：单点光（PointLight）难以照亮复杂模型
THREE.PointLight 强度高但衰减快，且无全局漫反射，极易导致模型大部分区域纯黑。推荐优先使用环境光 + 基础定向光组合：
// 添加环境光（全局基础照明，避免全黑） const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); // 添加柔和的定向光（模拟主光源，比点光更稳定） const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7); scene.add(directionalLight); // 可选：保留你的点光，但降低强度并调整位置 const pointLight = new THREE.PointLight(0xffffff, 2, 50); // 强度从9降到2，范围扩大到50 pointLight.position.set(1.53, 2.627, 1.217); scene.add(pointLight);
? 提示：Three.js 官方编辑器中能看见模型，是因为它默认启用了
THREE.RoomEnvironment（基于预计算的 HDRI 环境贴图）。生产项目中可升级为PMREMGenerator+ HDRI，但对调试阶段，环境光+定向光已足够。
✅ 3. 场景背景为黑色，模型暗部无法分辨
添加浅灰背景，立即暴露模型轮廓：
scene.background = new THREE.Color(0xeeeeee); // 替换纯黑背景
✅ 4. 相机位置与模型尺寸不匹配
Blender 导出的模型单位可能与 Three.js 场景尺度不一致（如模型实际尺寸为 0.1 单位，而相机在 z=24 处远眺）。建议：
- 在 Blender 导出前启用 "Apply Transform" 和 "Include → Scene Unit"；
- 加载后打印模型尺寸辅助调试：
loader.load('scene.glb', (gltf) => { const box = new THREE.Box3().setFromObject(gltf.scene); console.log('Model bounds:', box.min, box.max, 'size:', box.getSize(new THREE.Vector3())); scene.add(gltf.scene); }); - 根据输出尺寸动态调整相机距离（例如：若模型宽高约 2 单位，
camera.position.z = 5更合理）。
✅ 5. 完整修正版代码（关键修复已标注）
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee); // ✅ 背景非黑
// ✅ 光照组合：环境光 + 定向光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7);
scene.add(directionalLight);
const camera = new THREE.PerspectiveCamera(45, 800 / 600);
camera.position.set(-4.288, 24.327, 24.327); // ✅ 保持原位置，但确保模型在视锥内
camera.lookAt(0, 0, 0);
const canvas = document.querySelector('.webgl');
const renderer = new THREE.WebGL1Renderer({ canvas });
renderer.setSize(800, 600);
renderer.setPixelRatio(window.devicePixelRatio); // ✅ 高清屏适配
// ✅ 加载模型
const loader = new GLTFLoader();
loader.load(
'scene.glb',
(gltf) => {
scene.add(gltf.scene);
// 可选：自动居中并缩放模型
const box = new THREE.Box3().setFromObject(gltf.scene);
const center = box.getCenter(new THREE.Vector3());
gltf.scene.position.x -= center.x;
gltf.scene.position.y -= center.y;
gltf.scene.position.z -= center.z;
},
(xhr) => console.log(`${(xhr.loaded / xhr.total * 100).toFixed(0)}% loaded`),
(err) => console.error('GLTF load error:', err)
);
// ✅ 必须：启动渲染循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
// ✅ 响应窗口大小变化
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
⚠️ 注意事项总结
-
永远不要省略渲染循环：
render()是一次性快照，animate()才是持续画面； - 避免仅依赖 PointLight：尤其对静态展示，环境光+定向光更鲁棒；
- 检查模型导出设置：Blender 中导出 GLB 时勾选 Embed Textures、Apply Transform、Scene Unit；
-
验证模型是否真被添加：在控制台执行
scene.children查看是否包含gltf.scene； - 开启 WebGL 调试：Chrome DevTools → Rendering → “Render wireframe” 快速确认模型几何是否存在。
遵循以上步骤，90% 的“模型不可见”问题将立即解决。
