使用ThreeJS导入3D模型遇WebGL反馈循环错误求助

我是ThreeJS新手，正在学习导入3D模型。尝试用GLTFLoader导入Sketchfab上的福特野马1965 3D模型，运行页面后只显示灰色画布，控制台报错：

[.WebGL-0x12400b72300] GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture.

WebGL: too many errors, no more errors will be reported to the console for this context.

尝试修复但未成功，恳请帮助。以下是我的代码，scene.gltf和index.html、main.js在同一目录下。

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D-Mustang -- Nathan Kenopic</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <canvas class="webgl"></canvas>

    <script type="module" src="./main.js"></script>
</body>
<footer>
    <h3>3D Model made by Pooya_dh https://sketchfab.com/Pooya_dh</h3>
</footer>
</html>

main.js #

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

const scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);

const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 5000);
camera.rotation.y = 45 / 180 * Math.PI;
camera.position.x = 800;
camera.position.y = 100;
camera.position.z = 1000;

scene.add(camera);

const canvas = document.querySelector('.webgl');

const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;
controls.enablePan = false;
controls.enableZoom = false;
controls.autoRotate = true;
controls.autoRotateSpeed = 10;


const hlight = new THREE.AmbientLight(0x404040, 100);
scene.add(hlight);


const directionalLight = new THREE.DirectionalLight(0xffffff, 100);
directionalLight.position.set(0, 1, 0);
directionalLight.castShadow = true;

scene.add(directionalLight);


const light = new THREE.PointLight(0xc4c4c4, 10);
light.position.set(0, 300, 500);
scene.add(light);

const light2 = new THREE.PointLight(0xc4c4c4, 10);
light2.position.set(500, 100, 0);
scene.add(light2);

const light3 = new THREE.PointLight(0xc4c4c4, 10);
light3.position.set(0, 100, -500);
scene.add(light3);

const light4 = new THREE.PointLight(0xc4c4c4, 10);
light4.position.set(-500, 300, 500);
scene.add(light4);


const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(window.innerWidth, window.innerHeight);


const loader = new GLTFLoader();
loader.load('scene.gltf', function (gltf) {
    let car = gltf.scene.children[0];
    car.scale.set(0.5, 0.5, 0.5);

    let model = gltf.scene;
    scene.add(model);
});

function animate() {
    controls.update();
    renderer.render(scene, camera);
    window.requestAnimationFrame(animate);
}
animate();

问题原因与修复方案 #

这个报错核心是模型材质存在引用当前渲染帧缓冲作为纹理的情况，再加上代码里的几个问题共同导致：

1. 灯光强度严重超标：环境光和方向光强度设为100，会直接过度曝光模型，就算加载成功也看不到内容；
2. 模型缩放逻辑冗余：单独修改子节点缩放后又添加整个场景，层级操作混乱，缩放可能不生效；
3. 相机位置不合理：相机离模型过远，可能超出视锥体范围；
4. 阴影渲染加剧冲突：方向光开启阴影后，可能触发WebGL帧缓冲与纹理的反馈循环。

具体修复步骤：

• 降低灯光强度：把环境光、方向光强度改成2，点光强度改成2，避免过度曝光；
• 简化模型加载逻辑：直接对整个模型场景缩放，不要单独操作子节点：

  loader.load('scene.gltf', function (gltf) {
      gltf.scene.scale.set(0.5, 0.5, 0.5);
      scene.add(gltf.scene);
  });
  

• 调整相机位置：将相机位置改为camera.position.set(10, 5, 15)，拉近与模型的距离，确保在视锥体内；
• 临时禁用阴影：先注释directionalLight.castShadow = true，等模型正常显示后再开启；
• 重新下载模型：如果仍报错，从Sketchfab重新下载纯净的GLTF/GLB格式模型，避免带不兼容的后处理材质。

修复后的核心代码示例：

// 灯光调整
const hlight = new THREE.AmbientLight(0x404040, 2);
scene.add(hlight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 2);
directionalLight.position.set(0, 1, 0);
// directionalLight.castShadow = true; // 先注释，正常显示后再开启
scene.add(directionalLight);

const light = new THREE.PointLight(0xc4c4c4, 2);
light.position.set(0, 3, 5);
scene.add(light);
// 其他点光同理调整位置和强度

// 相机调整
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 500);
camera.position.set(10, 5, 15);
scene.add(camera);

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