部分Safari版本（如16.5）中Three.js纹理失效问题求助

可能的故障原因 #

• SVG背景纹理的Safari兼容性问题：Safari Ventura 16.5及部分旧版本对Three.js直接使用SVG作为场景背景的支持存在缺陷，无法正确解析或渲染SVG纹理。
• 纹理异步加载未处理：TextureLoader.load是异步操作，代码中未等待纹理加载完成就开始渲染，Safari的WebGL渲染管线对未就绪纹理的容错性低于Chrome等浏览器，导致纹理显示异常。
• 透明材质与阴影的冲突：MeshStandardMaterial开启transparent: true同时启用阴影（castShadow/receiveShadow），在Safari中可能触发渲染管线的兼容性问题，导致纹理或阴影渲染异常。
• 纹理尺寸非2的幂次问题：SVG转换为纹理时如果生成的尺寸不是2的幂次（如1024×1024、2048×2048），旧版Safari的WebGL1.0可能无法正确采样纹理。

针对性解决方案 #

1. 替换SVG背景为PNG格式 #

将背景SVG导出为PNG图片（确保尺寸为2的幂次），避免Safari对SVG纹理的解析bug：

// 替换原SVG加载代码为PNG
const backgroundTexture = textureLoader.load('src/img/textures/background.png');
scene.background = backgroundTexture;

2. 等待所有纹理加载完成后再初始化场景 #

使用LoadingManager统一管理纹理加载，确保所有资源就绪后再启动渲染：

const loadingManager = new THREE.LoadingManager();
const textureLoader = new THREE.TextureLoader(loadingManager);

let mapTexture, backgroundTexture;

// 加载纹理
mapTexture = textureLoader.load('src/img/textures/map_lines_dots.jpg');
backgroundTexture = textureLoader.load('src/img/textures/background.png'); // 用PNG替代SVG

// 所有资源加载完成后初始化场景
loadingManager.onLoad = function() {
    scene.background = backgroundTexture;
    
    const geometry = new THREE.SphereGeometry(1, 50,50);
    const material = new THREE.MeshStandardMaterial({
        map: mapTexture,
        opacity: 0.8,
        transparent: true
    });
    const sphere = new THREE.Mesh(geometry, material);
    
    sphere.position.set(0, 0, 0);
    sphere.castShadow = true;
    sphere.receiveShadow = true;
    scene.add(sphere);

    const light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.set(3, 2, 5);
    light.castShadow = true;
    scene.add(light);

    const animate = function () {
        requestAnimationFrame(animate);
        sphere.rotation.x = 0.3;
        sphere.rotation.y += 0.0025;
        renderer.render(scene, camera);
    };
    animate();
};

// 相机、渲染器初始化代码保持不变放在外部
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;
camera.rotation.z = Math.PI /-7;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.getElementById("scene-container").appendChild(renderer.domElement);

window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

3. 调整透明材质与阴影的设置 #

如果阴影不是必须的，暂时关闭阴影功能；如果需要阴影，尝试改用alphaTest替代transparent（适合纹理有明确透明区域的情况）：

// 方案1：关闭阴影
sphere.castShadow = false;
sphere.receiveShadow = false;
renderer.shadowMap.enabled = false;

// 方案2：使用alphaTest替代transparent（如果纹理有明确的透明通道）
const material = new THREE.MeshStandardMaterial({
    map: mapTexture,
    alphaTest: 0.5, // 替代transparent和opacity
});

4. 确保纹理尺寸为2的幂次并设置包裹模式 #

检查并调整纹理图片的尺寸为2的幂次，同时给纹理设置包裹模式，提升Safari下的兼容性：

mapTexture.wrapS = THREE.ClampToEdgeWrapping;
mapTexture.wrapT = THREE.ClampToEdgeWrapping;
backgroundTexture.wrapS = THREE.ClampToEdgeWrapping;
backgroundTexture.wrapT = THREE.ClampToEdgeWrapping;

额外调试建议 #

• 打开Safari开发者工具（Cmd+Opt+I），切换到WebGL面板查看是否有渲染错误提示。
• 降低Three.js版本到与Safari 16.5更兼容的稳定版（如r158及之前版本）。

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