时间戳

首页 > 解决方案 > 带有 alphaMap 的 SpriteMaterial

three.js - 带有 alphaMap 的 SpriteMaterial

问题描述

当我尝试将 alphaMap 与 THREE.SpriteMaterial 一起使用时：我收到此消息 THREE.SpriteMaterial: 'alphaMap' is not a property of this material。有没有办法用 alphaMap 剪辑 SpriteMaterial？谢谢

 const imgTexture = new THREE.TextureLoader().load(`logo.jpg`);
                        const circleAlphaMap = new THREE.TextureLoader().load(`alpha.png`);

                        const material = new THREE.SpriteMaterial({ map: imgTexture, alphaMap: circleAlphaMap, alphaTest:0.5 });
                        const sprite = new THREE.Sprite(material);
                        sprite.scale.set(12, 12);
                        obj.add(sprite)

标签： three.js

解决方案

为什么不使用.png具有透明度的文件？你可以看到这就是他们在这个例子中采用的方法。

当您点击右下角 ( < >) 图标时，您可以看到源代码，它只是一个透明的 png 设置到map属性。

var mapB = textureLoader.load( "textures/sprite1.png" );
var materialB = new THREE.SpriteMaterial( {
    map: mapB,
    color: 0xffffff,
    fog: true
} );

推荐阅读