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函数计算坐标即可

相关推荐
Jedi Hongbin15 天前
threejs替换全部物体材质
材质·threejs
AllBlue1 个月前
左手坐标系、右手坐标系、坐标轴方向
blender·webgl·threejs·cesium
夏暖冬凉2 个月前
Three.js投射光线实现三维物体交互
javascript·threejs
懒懒de尐彪2 个月前
使用threejs实现3D卡片菜单
threejs
threelab2 个月前
three完全开源扩展案例05-围栏着色器
开源·threejs·着色器
threelab2 个月前
3D Web开发新篇章:threelab探索之旅
3d·webgl·threejs
trayvontang2 个月前
Threejs环境、透视相机、坐标系、光源
threejs·透视相机·threejs流程·threejs基础
幻梦丶海炎2 个月前
【Threejs进阶教程-着色器篇】1. Shader入门(ShadertoyShader和ThreejsShader入门)
webgl·threejs·着色器·shadertoy·glsl
Champion.XL3 个月前
Node.js 渲染三维模型并导出为图片
node.js·webgl·threejs·服务端渲染三维模型·gl