Question

当我尝试将alphaMap与THREE.SpriteMaterial一起使用时：我收到此消息 THREE.SpriteMaterial：“ alphaMap”不是此材质的属性。有什么方法可以用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)

Answer 1

为什么不使用透明的.png文件？您可以看到他们使用的是in this example。

单击右下角的< >图标，您可以看到源代码，它只是设置为map属性的透明png。

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

Answer 2

只是修补材料的一个选项（无法说出它的正确性）：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 1);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var spriteMat = new THREE.SpriteMaterial({
  map: new THREE.TextureLoader().load(`https://threejs.org/examples/textures/uv_grid_opengl.jpg`),
  alphaTest: 0.75
});
spriteMat.defines = {
  USE_ALPHAMAP: ''
};
console.log(spriteMat)

spriteMat.onBeforeCompile = shader => {
  shader.uniforms.alphaMap = {
    value: new THREE.TextureLoader().load(`https://threejs.org/examples/textures/sprites/circle.png`)
  };
  shader.fragmentShader = shader.fragmentShader.replace(
    `#include <map_pars_fragment>`,
    `#include <map_pars_fragment>
     #include <alphamap_pars_fragment>
    `
  );
  shader.fragmentShader = shader.fragmentShader.replace(
    `#include <map_fragment>`,
    `#include <map_fragment>
     #include <alphamap_fragment>
    `
  );
}

var sprite = new THREE.Sprite(spriteMat);
scene.add(sprite);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0px;
}

<script src="https://threejs.org/build/three.min.js"></script>

P.S。我更喜欢编写自定义着色器，如Marquizzo所说。

SpriteMaterial与alphaMap

2 个答案: