在ThreeJS 87版中渲染白色材料时遇到问题。
以下是复制步骤:
问题是,渲染的纹理现在在应该完全为白色的部分上具有灰色边缘。 任何带有白色边缘的图像都会发生这种情况。我还尝试了渲染器和材质的许多不同配置,但无济于事。
我制作了一个非常简单的CodePen,它尽可能简单地复制了行为。有谁知道如何解决这个问题?
CodePen:
https://codepen.io/ivan-i1/pen/pZxwZX
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的副本,其中包含更新的图像,并显示出相同(但略有)的灰色边缘:
很抱歉第一次没有这么精确,我们将不胜感激。
答案 0 :(得分:0)
将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;
请注意纹理的一个象限上的黑色边框。