Question

在ThreeJS 87版中渲染白色材料时遇到问题。

以下是复制步骤：

作为纹理加载的白色PNG图像
此纹理用于创建MeshBasicMaterial（作为参数贴图传递）
MeshBasicMaterial用于沿平面几何图形创建网格
将网格添加到一个空的场景中，并在WebGLRenderer上以alpha：true和clearColor渲染为白色

问题是，渲染的纹理现在在应该完全为白色的部分上具有灰色边缘。任何带有白色边缘的图像都会发生这种情况。我还尝试了渲染器和材质的许多不同配置，但无济于事。

我制作了一个非常简单的CodePen，它尽可能简单地复制了行为。有谁知道如何解决这个问题？

CodePen：

var renderer, width, height, scene, camera, dataUrl, threeTexture, geometry, material, mesh;

width = window.innerWidth;
height = window.innerHeight;
dataUrl = '//data url from image';

threeTexture = new THREE.ImageUtils.loadTexture(dataUrl);

material = new THREE.MeshBasicMaterial({
  map: threeTexture,
  transparent: true,
  alphaTest: 0.1
});
material.needsUpdate = true;

geometry = new THREE.PlaneGeometry(5, 5);
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -5;

scene = new THREE.Scene();
scene.add(mesh);

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );

renderer = new THREE.WebGLRenderer({
    alpha: true
});
document.body.appendChild( renderer.domElement );
renderer.setSize(width, height);
renderer.setClearColor( 0xffffff, 1 );

//renderer.render(scene, camera);
function render() {
  //Finally, draw to the screen
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

我们非常感谢您的帮助。

ThreeJS / 87

编辑：

我认为我的帖子不够精确。

这是原始的完整Alpha图片： It might not show because its all white

这是在4个象限上具有不同透明度的同一幅图像： This one too might not show because its all white

有人告诉我要提高alphaTest的位置，我得到了一个有用的答案，但问题是这样做会清除图像中的透明部分，因此我需要保留这些部分。

这是codepen的副本，其中包含更新的图像，并显示出相同（但略有）的灰色边缘：

codepen

很抱歉第一次没有这么精确，我们将不胜感激。

Answer 1

将alphaTest设置为0.9 ..或更高..观察改进。您的恒星纹理在恒星外部的区域具有灰色或黑色，这就是为什么您看到灰色光晕的原因。您可以通过在图像编辑工具中用白色填充图像（但不更改Alpha通道）来修复它。

此外，您应该升级到最新的three.js（r95）

编辑：

我不确定您的确切期望是什么。.但是有许多不同的设置可以控制3种alpha混合。有renderer.premultipliedAlpha = true / false（默认为true）和material.transparent = true / false; material.alphaTest是一个阈值，用于控制完全忽略什么水平的alpha。还有material.blending，.blendEquation，blendEquation，.blendEquationAlpha，blendDst和blendSrc。等等。您可能需要阅读这些内容。

https://threejs.org/docs/#api/materials/Material

例如..这是您的纹理：

renderer.premultipliedAlpha = false;

请注意纹理的一个象限上的黑色边框。

https://codepen.io/manthrax/pen/KBraNB

ThreeJS：将白色PNG图像作为纹理加载，用作材质并渲染为具有灰色边缘的平面

1 个答案: