三纤不显示透明png纹理

Question

我想在游戏中每个图块的背面显示一个小徽标，一个透明的 png。但是，png 未显示。

这是png：

这是纹理的代码：

import { TextureLoader } from 'three/src/loaders/TextureLoader';

import { useLoader } from '@react-three/fiber'

import * as THREE from 'three'

export default function Tile() {
    ...
    const tileBackTexture = useLoader(THREE.TextureLoader, './presets_library/Tile_Back_Logo.png')
    const tileBackTextureMaterial = new THREE.MeshBasicMaterial({ 
        map: tileBackTexture, 
        alphaMap: tileBackTexture,
        transparent: true,
        side: THREE.DoubleSide,
        alphaTest: 0.5,
        depthWrite: false,
        opacity: 0.0,
    });
    ...
    return (
        <mesh geometry={nodes.Tile_Back_Face.geometry} material={tileBackTextureMaterial} />
    )
}

结果如下：

使用模型，我为加载的纹理制作了一个单独的浮动面。我已经确保 png 本身具有透明背景。加载纹理时，我确保透明设置为 true，地图设置为加载的 png，alphaMap 设置为加载的 png，但没有任何变化。

我也尝试过使png变小，添加不透明度属性，但我似乎找不到可能阻止它显示的原因。

如果有人知道可能出了什么问题，请告诉我。

谢谢你。

更新：

即使在画布上绘制图像并使用该图像创建纹理和材质也不会显示它：

    let img = new Image();
    img.crossOrigin='Anonymous';
    
    let ctx = canvasRef.current.getContext('2d', { alpha: true, desynchronized: false, colorSpace: 'srgb', willReadFrequently: true})
    ctx.globalCompositeOperation = "copy";

    img.onload = function () {
        ctx.width = img.width;
        ctx.height = img.height;
        ctx.imageSmoothingEnabled = false;
        
        ctx.drawImage(img, 0, 0);
    }

    img.src = './presets_library/Tile_Back_Logo_Small.png';
    
    const texture = new THREE.Texture(canvasRef.current);
    
    const material = new THREE.MeshBasicMaterial({ 
        map: texture,
        alphaMap: texture, 
    });

canvasRef 正在显示 png，但由于某种原因在图块上看不到。

Answer 1

尝试这个，没有三：

const tex = useLoader(TextureLoader, 'tex.jpg')

https://docs.pmnd.rs/react- Three-Fiber/tutorials/loading-textures

Answer 2

这里是codesandbox，已经解决了。我应该只使用 useTexture 钩子。