three.js从r87升级至r88/r89后基础场景失效原因咨询

你遇到的这个问题在r88版本的升级中很常见，主要是因为three.js在r88做了几个不兼容的核心API变更，尤其是针对基础代码场景，我帮你梳理最可能的原因和解决方法：

1. THREE.Geometry被彻底移除 #

r88版本开始，官方完全移除了THREE.Geometry类，统一使用THREE.BufferGeometry作为几何体的标准实现。如果你的基础代码里是手动创建几何体（比如手动定义顶点、面来构建立方体），用了new THREE.Geometry()，那在r88及之后版本会直接报错，导致渲染终止，显示黑屏。

解决方法： #

将所有THREE.Geometry的使用替换为THREE.BufferGeometry。比如原来的手动创建立方体代码：

// r87及之前可用的代码（r88失效）
var geometry = new THREE.Geometry();
geometry.vertices.push(
  new THREE.Vector3(-1, -1,  1),
  new THREE.Vector3( 1, -1,  1),
  // ... 其他顶点
);
geometry.faces.push(new THREE.Face3(0, 1, 2));
// ... 定义面

替换为BufferGeometry实现：

// r88及之后可用的代码
var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array([
  -1.0, -1.0,  1.0,
   1.0, -1.0,  1.0,
   // ... 其他顶点数据
]);
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
// 如果需要面，使用index属性
var indices = new Uint16Array([
  0, 1, 2,
  // ... 面的索引
]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));

不过如果是用内置的几何体（比如BoxGeometry、SphereGeometry），其实在r87版本就已经是基于BufferGeometry实现的了，这类代码不需要修改，直接兼容。

2. 场景背景与渲染器清屏设置的冲突 #

r88版本新增了THREE.Scene.background属性，默认值为null。如果你的代码之前依赖渲染器的clearColor来设置背景，而升级后没有调整，可能会出现背景黑色且立方体被遮挡的情况（不过更多是视觉问题，但若材质设置不当也会导致立方体不可见）。

解决方法： #

• 如果你想保留原来的背景色，可以直接设置scene.background：

scene.background = new THREE.Color(0xf0f0f0); // 浅灰色背景，和r87默认渲染器背景色一致

• 或者继续使用渲染器的clearColor，但需要确保scene.background为null（默认就是）：

renderer.setClearColor(0xf0f0f0);

3. 材质属性的默认值变更 #

r88版本调整了MeshStandardMaterial的默认metalness值，从原来的0.5改为0.0。如果你的代码使用了MeshStandardMaterial且没有显式设置metalness，材质的视觉效果会变暗淡，极端情况下看起来像黑色（尤其是在光源不足的场景）。

解决方法： #

显式设置材质的metalness和roughness属性，确保视觉效果符合预期：

var material = new THREE.MeshStandardMaterial({
  color: 0x00ff00,
  metalness: 0.5, // 恢复到r87的默认值
  roughness: 0.5
});

4. 渲染器初始化参数的隐性变更 #

r88版本对WebGLRenderer的部分默认参数做了调整，比如powerPreference默认值改为"default"，如果你的设备性能较低，可能会导致渲染异常。不过这个情况比较少见，但若遇到可以显式指定参数：

var renderer = new THREE.WebGLRenderer({
  antialias: true,
  powerPreference: "high-performance"
});

最后建议你打开浏览器的开发者工具（F12）查看控制台的报错信息，这能快速定位具体的API兼容问题，比如如果是THREE.Geometry不存在的错误，一眼就能看出来。

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