从Three.js r52升级到r55时,无法再改变不透明度

Question

基本上我正在升级我的应用程序,从r52到r55.这个应用程序使用动画(Tweens)来更新行,但也使用粒子系统.在r52中,一切都运行得很好,缩放,移动和改变不透明度.

我使用了这些WebGLRenderer构造函数设置:

    clearColor: 0x1f1f1f
    clearAlpha: 1
    antialias: true
    sortObjects: false

我从例子中得到了一个简单的着色器:

<script type="x-shader/x-vertex" id="vertexshader">
    attribute float size;
    attribute vec3 customColor;
    attribute float customOpacity;

    varying vec3 vColor;
    varying float vOpacity;

    void main() {
        vColor = customColor;
        vOpacity = customOpacity;

        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
        gl_Position = projectionMatrix * mvPosition;
    }

</script>

<script type="x-shader/x-fragment" id="fragmentshader">
        uniform vec3 color;
        uniform sampler2D texture;

        varying vec3 vColor;
        varying float vOpacity;

        void main() {
            gl_FragColor = vec4( color * vColor, vOpacity );
            gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
        }
</script>

我使用以下方法初始化粒子ShaderMaterial:

    blending       : THREE.AdditiveBlending
    depthTest      : false
    transparent    : false

和ParticleSystem通过手动设置:

  system.sortParticles = true
  system.matrixAutoUpdate = true
  system.visible = true
  system.dynamic = true

所以这里它是如何呈现在Three.js r52:

现在我已经阅读了迁移维基页面,并得出结论我只需更改一些名称,WebGLRenderer构造函数,材质或着色器属性中没有任何内容.

我已升级到r55,现在视觉效果被打破:

线条和粒子现在都很明亮(不考虑不透明度).

此外,对于粒子现在,alpha蒙版被打破(如果你仔细观察颜色是不同的,并且当与其他粒子重叠时有一个"方形切割",我在r52中有一些东西,只需调整WebGLRender设置即可修复)

有什么可以改变的？我试图更改WebGL构造函数,alphas,背景颜色中的设置..但它没有帮助.

Answer 1

可能,您需要将着色器材质设置为透明:

material.transparent = true;

three.js r.55