three.js在同一个div下切换不同模型挂载的问题

最新推荐文章于 2025-02-25 16:18:28 发布

Beam007

最新推荐文章于 2025-02-25 16:18:28 发布

阅读量3.6k

点赞数 3

分类专栏： threejs

本文链接：https://blog.csdn.net/Beam007/article/details/90231940

版权

本文讲述了在three.js中如何在同一个div元素下切换不同的3D模型，重点解决了模型切换后旧模型残留以及canvas叠加显示的问题。通过清除场景中的模型而非整个场景，并正确移除canvas子节点，成功实现了模型平滑切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

同一个div下，通过查询不同的设备展示不同的模型。
在这里插入图片描述

1、实现新202011

实现形式：不清除场景，只清除场景中的模型，加载新的模型到场景中。
关键代码：

this.paramsThree = {
    modelName: '', // .glb模型的文件名字
    name: 'devGlb', // 模型加入场景的名字，此处统一是devGlb
    offsetY: 0 // 模型加入场景的y轴偏移量
}
if (`当前设备模型不为空`) {
    clearModel() // 清除模型
    this.paramsThree.modelName = `从接口中获取模型文件名字`
    initModel(this.paramsThree) // 加载新模型
} else {
    clearModel() // 清除模型
    this.paramsThree.modelName = ''
}

// 主要变量
let LOAD_PARAMS = null
// 模型清除
export function clearModel () {
    if (scene) {
        let objM = scene.getObjectByName(LOAD_PARAMS.name)
        if (objM) scene.remove(objM)
    }
}
// 模型加载
export function initModel (paramsThree) {
    LOAD_P