如何在 THREE.js 中更改透明图像的背景?

问题描述 投票:0回答:1

https://codepen.io/joe1992/pen/yLQRwrg

在我的 Three.js 项目中,我想将 .png 文件应用于对象,但 Alpha 通道不允许底层对象的颜色显示出来;好像所有东西都被删除了。

我尝试了很多选项,从图像的透明度到混合组合,这可能与此有关吗? 当我使用以下代码时,它接近我想要的,但白色背景不像对象的其余部分那样透明:

blendEquation: THREE.AddEquation,
blendSrc: THREE.SrcAlphaFactor,
blendDst: THREE.OneMinusDstColorFactor,
javascript three.js 3d png
1个回答
0
投票

@Rabbid76

PNG 很好,有透明背景。

试试这个

const imageMaterial = new THREE.MeshBasicMaterial({
  map: imageTexture,
  alphaTest: 0.001,
  transparent: true,
  side: THREE.DoubleSide,
  blending: THREE.CustomBlending,
  blendEquation: THREE.AddEquation,
  blendSrc: THREE.SrcAlphaFactor,
  // blendDst: THREE.OneMinusDstColorFactor,
});

const transparentMaterial = new THREE.MeshBasicMaterial({
  color: whiteColor,
  opacity: 0.0,
  transparent: true,
});

const cubeMesh = new THREE.Mesh(geometry, [
  transparentMaterial,
  transparentMaterial,
  imageMaterial,
  transparentMaterial,
  transparentMaterial,
  transparentMaterial,
]);
© www.soinside.com 2019 - 2024. All rights reserved.