threejs

1.场景清空,释放内容

javascript 复制代码
// 假设你已经有一个Three.js的场景对象scene
 
// 函数:清空场景中的所有对象
function clearScene(scene) {
    while(scene.children.length > 0){
        const object = scene.children[0];
        
        if(object.isMesh) {
            // 如果有几何体和材质,也进行清理
            object.geometry.dispose();
            if(object.material.isMaterial) {
                cleanMaterial(object.material);
            } else {
                // 材质组是数组,所以我们需要遍历它
                for(const material of object.material) cleanMaterial(material);
            }
        }
        
        scene.remove(object);  // 从场景中移除对象
    }
}
 
// 辅助函数:清理材质资源
function cleanMaterial(material){
    material.dispose(); // 清理材质
    if(material.map) material.map.dispose(); // 清理贴图
    if(material.lightMap) material.lightMap.dispose();
    if(material.bumpMap) material.bumpMap.dispose();
    if(material.normalMap) material.normalMap.dispose();
    if(material.specularMap) material.specularMap.dispose();
    if(material.envMap) material.envMap.dispose();
    // ... 清理其他你使用的材质资源
}
 
// 使用方法:
clearScene(scene);

2.选中物体

如果放在像若依这种前端框架中,会有菜单栏导致计算坐标的位置发生偏移

使用clientX配合getBoundingClientRect函数计算坐标即可

相关推荐
患得患失94916 天前
【Threejs】【工具类】Raycaster实现 3D 交互(如鼠标拾取、碰撞检测)的核心工具
3d·交互·threejs·raycaster
gis分享者25 天前
学习threejs,使用自定义GLSL 着色器,实现水面、粒子特效
threejs·着色器·glsl·粒子·shadermaterial·unrealbloompass·水面
陶甜也1 个月前
threeJS 实现开花的效果
前端·vue·blender·threejs
二川bro1 个月前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
哈哈地图1 个月前
three.js手机端的4种旋转方式
threejs·手机交互
咔咔一顿操作1 个月前
第五章 vue3 + Three.js 实现高级镜面反射效果案例解析
前端·javascript·vue.js·人工智能·信息可视化·threejs
咔咔一顿操作1 个月前
第六章 Vue3 + Three.js 实现高质量全景图查看器:从基础到优化
开发语言·javascript·人工智能·ecmascript·threejs
二川bro2 个月前
第八篇:交互入门:鼠标拾取物体
前端·交互·threejs
救救孩子把3 个月前
Three.js 从零入门:构建你的第一个 Web 3D 世界
前端·javascript·3d·threejs
七月的冰红茶3 个月前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs