如何使用STLLoader渲染多个3D模型？解决白屏无报错问题

你的代码核心问题是初始化逻辑完全颠倒，导致重复创建场景、渲染器并无限循环加载模型，最终引发白屏。具体问题点和修复方案如下：

关键问题点 #

1. 加载模型回调重复调用init()：load1()和load2()的回调里都调用init()，而init()又会再次调用load1()和load2()，形成无限循环，重复创建场景、渲染器，导致DOM混乱。
2. 无效的scene.add(object)：object变量从未被赋值，初始时是undefined，添加到场景会引发隐性错误。
3. 全局变量污染：load1()里的loader没有用let声明，变成全局变量，可能引发意外冲突。

修复后的代码 #

import * as THREE from './threejs/three.module.js';
import {STLLoader} from './threejs/STLLoader.js';
import {OrbitControls} from './threejs/OrbitControls.js';

let scene, camera, renderer;

// 先初始化基础环境
init();
// 再加载模型
load1();
load2();

function init(){
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        10000
    );
    camera.position.z = 10;

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 移除无效的scene.add(object)
    let control = new OrbitControls(camera, renderer.domElement);

    let light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0,0,10);
    scene.add(light);

    let light2 = new THREE.DirectionalLight(0xffffff);
    light2.position.set(0,0,-10);
    scene.add(light2);

    animate();
}

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

var ob1, ob2;

function load1(){
    // 添加let声明loader，避免全局污染
    let loader = new STLLoader();
    loader.load('/左肾占位/NING_XUAN_QING_M_056Y_Violet_001.stl',(model)=>{
        ob1 = new THREE.Mesh(
            model,
            new THREE.MeshLambertMaterial({color: 0x00ff00})
        );
        ob1.scale.set(0.2, 0.2, 0.2);
        ob1.position.set(0,-5,0);
        ob1.rotation.x = -Math.PI/2;
        // 加载完成后直接将模型添加到场景
        scene.add(ob1);
    });
}

function load2(){
    let loader = new STLLoader();
    loader.load('/左肾占位/NINGXUANQINGM056Y_Turquoise_001.stl',(model)=>{
        ob2 = new THREE.Mesh(
            model,
            new THREE.MeshLambertMaterial({color: 0x00ff00})
        );
        ob2.scale.set(0.2, 0.2, 0.2);
        ob2.position.set(0,0,0);
        ob2.rotation.x = -Math.PI/2;
        // 加载完成后直接将模型添加到场景
        scene.add(ob2);
    });
}

核心改动说明 #

• 调整执行顺序：先调用init()初始化场景、相机、渲染器等基础组件，再调用load1()和load2()加载模型。
• 加载回调仅添加模型：模型加载完成后，直接将创建好的Mesh添加到已初始化的场景中，不再调用init()。
• 移除无效代码：删除scene.add(object)，避免添加undefined到场景。
• 规范变量声明：给load1()里的loader添加let声明，避免全局变量污染。

这样修改后，两个模型会依次加载并添加到场景中，实现多模型同时渲染的效果。

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