threejs

1.场景清空，释放内容

// 假设你已经有一个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函数计算坐标即可

    document.addEventListener( 'pointerdown', (event) =>{
       // 将鼠标位置转换成归一化设备坐标(-1 到 +1)
      // mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      // mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
      let container = document.getElementById("app1");
      
      
      try{
        let getBoundingClientRect = container.getBoundingClientRect()
        mouse.x = ((event.clientX - getBoundingClientRect.left) / container.offsetWidth) * 2 - 1;
        mouse.y = -((event.clientY - getBoundingClientRect.top) / container.offsetHeight) * 2 + 1;
      }catch{

      }
      
      raycaster.setFromCamera( mouse, camera );
})

3.闪白问题

        Z-Fighting问题

        logarithmicDepthBuffer参数和多边形偏移不能同时设置

renderer = new THREE.WebGLRenderer( { logarithmicDepthBuffer: true } );

new THREE.Mesh(new THREE.BoxGeometry(50, 50, 50),
    new THREE.MeshBasicMaterial({
        color: 0x0000ff,
        polygonOffset: true,
        polygonOffsetFactor: 1.0,
        polygonOffsetUnits: 4.0
    }));