月: 2025年5月

WKWebViewでthree.jsを表示した時にglbのテクスチャが真っ黒になる問題

スープレックス コメントをする

WKWebViewでthree.jsのコンテンツを表示している際に、Blenderで作ったglbを読み込むと、WKWebViewをリロードした時に画像のテクスチャが真っ黒になる症状が発生しました。

その対策のためにやったことがこれらです。

three.jsのキャッシュを無効に

THREE.Cache.enabled = false;

効果なし🥲

GLTFLoaderを使いまわさない

function loadModel(path) {
  const loader = new GLTFLoader(); // 毎回新規作成
  loader.load(path, (gltf) => {
    scene.add(gltf.scene);
  });
}

効果なし🥲

読み込むglbファイルのパスに?${timestamp}をつける

const timestamp = Date.now();
loader.load(`model.glb?ts=${timestamp}`, ...);

効果なし🥲

webViewを作る際に毎回新しいプロセスプールを作成

let config = WKWebViewConfiguration()
config.processPool = WKProcessPool()
let webView = WKWebView(frame: .zero, configuration: config)

効果なし🥲

glbではなくgltf + bin + pngでエクスポートしたものを読み込む

const timestamp = Date.now();
loader.load(`model.gltf?ts=${timestamp}`, ...); //読み込むのはgltfだけでOK

効果なし🥲

GLTF読み込み後、テクスチャに needsUpdate = true

gltf.scene.traverse((child) => {
  if (child.isMesh && child.material.map) {
    child.material.map.needsUpdate = true;
  }
});

効果なし🥲

手動でテクスチャを読み込んでマテリアルに割り当てる

const tex = textureLoader.load('model/texture.png?ts=' + Date.now());

gltf.scene.traverse((child) => {
  if (child.isMesh && child.material.map) {
    const originalMap = child.material.map;
    const newMap = tex.clone();
    newMap.offset.copy(originalMap.offset);
    newMap.repeat.copy(originalMap.repeat);
    newMap.rotation = originalMap.rotation;
    newMap.center.copy(originalMap.center);
    newMap.wrapS = originalMap.wrapS;
    newMap.wrapT = originalMap.wrapT;
    newMap.flipY = originalMap.flipY;
    newMap.encoding = THREE.sRGBEncoding;
    child.material.map = newMap;
    child.material.needsUpdate = true;
  }
});

検証中…