Three.js png 纹理 - alpha 呈现为白色而不是透明

Posted 2023-02-27

【中文标题】Three.js png 纹理 - alpha 呈现为白色而不是透明

【英文标题】：Three.js png texture - alpha renders as white instead as transparent

【发布时间】：2013-07-03 10:08:59

【问题描述】：

我正在创建一个立方体，并在每个面上应用 6 种不同的纹理。每个纹理都是一个 .png 文件并包含透明部分。我还在为立方体应用颜色 - 我想通过 png 透明度查看该颜色。

问题：透明度呈现为白色，所以我看不到立方体的基色（如果我删除 png 纹理，它会呈现正常）

如何使 png 透明度起作用？我尝试使用一些材质设置，但没有一个让它变得透明。

创建立方体和材质的代码：

var geometry = new THREE.CubeGeometry(150, 200, 150, 2, 2, 2);
var materials = [];

// create textures array for all cube sides
for (var i = 1; i < 7; i++) 
   var img = new Image();
   img.src = 'img/s' + i + '.png';
   var tex = new THREE.Texture(img);
   img.tex = tex;

   img.onload = function () 
      this.tex.needsUpdate = true;
   ;

   var mat = new THREE.MeshBasicMaterial(color: 0x00ff00, map: tex, transparent: true, overdraw: true );
   materials.push(mat);

cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
cube.position.y = 150;
scene.add(cube);

---

编辑：

下图显示了问题 - 使用 senthanal 解决方案，左侧纹理现在呈现正常 - 这是一个没有透明度的 png 图像 - 我在代码中设置了透明度

materialArray.push(new THREE.MeshBasicMaterial( map: THREE.ImageUtils.loadTexture('img/s2.png'), transparent: true, opacity: 0.9, color: 0xFF0000 ));

正确的纹理也是 png 图像 - 只是它具有透明区域（所有呈现白色的都应该是纯红色，因为它是透明的并且应该从立方体中获取颜色？）。我怎样才能使那个白色部分透明？

【问题讨论】：

***.com/questions/12368200/… 的副本（如果您希望背景颜色不透明）

@WestLangley - 是的 - 不知道我是怎么错过这个问题的，因为我整天都在阅读有关 three.js 的答案。解决了我的问题 - 作为重复关闭。

【参考方案1】：

材质的不透明度属性可以为您解决问题。下面，示例代码sn-p：

var materialArray = [];

materialArray.push(new THREE.MeshBasicMaterial(  map: THREE.ImageUtils.loadTexture( 'images/xpos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 ));
materialArray.push(new THREE.MeshBasicMaterial(  map: THREE.ImageUtils.loadTexture( 'images/xneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 ));
materialArray.push(new THREE.MeshBasicMaterial(  map: THREE.ImageUtils.loadTexture( 'images/ypos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 ));
materialArray.push(new THREE.MeshBasicMaterial(  map: THREE.ImageUtils.loadTexture( 'images/yneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 ));
materialArray.push(new THREE.MeshBasicMaterial(  map: THREE.ImageUtils.loadTexture( 'images/zpos.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 ));
materialArray.push(new THREE.MeshBasicMaterial(  map: THREE.ImageUtils.loadTexture( 'images/zneg.png' ), transparent: true, opacity: 0.5, color: 0xFF0000 ));

var MovingCubeMat = new THREE.MeshFaceMaterial(materialArray);
var MovingCubeGeom = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materialArray );

MovingCube = new THREE.Mesh( MovingCubeGeom, MovingCubeMat );
MovingCube.position.set(0, 25.1, 0);

scene.add( MovingCube );    

http://threejs.org/docs/#Reference/Materials/Material 关键是设置透明属性为真，设置不透明度为0.5（例如）。 添加第二个立方体，它完全适合内部，没有透明度，来自@WestLangley（Three.js canvas render and transparency）的想法

backCube = new THREE.Mesh( MovingCubeGeom, new THREE.MeshBasicMaterial(  color: 0xFF0000 ) );
backCube.position.set(0, 25.1, 0);
backCube.scale.set( 0.99, 0.99, 0.99 );
scene.add( backCube );

【讨论】：

这可行，但前提是我使用 WebGLRenderer - 我怎样才能使它与 CanvasRenderer 一起使用？我需要支持 IE9 和平板电脑。基本上我想要做的就是将 png 图像应用于立方体并通过 png 的透明部分查看立方体颜色？我上传了一张我现在已经实施了你的解决方案的图片。

请注意，您实际上不需要将opacity 设置为任何内容；你只需要transparent 是真的

无论我做什么，我的 alpha 贴图都不会工作 :( 真的让我很紧张。