从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