Three.js PointsMaterial AdditiveBlending 工件

Question

Three.js PointsMaterial AdditiveBlending 工件

为什么点 AdditiveBlending 仅在从右看而不是从左看时才起作用？设置深度测试：false可以解决问题，但会引发另一个问题，即点与其他网格重叠。

<html>
<head>
    <title>My first three.js app</title>
    <style>
        html
        ,body
        {height: 100%;}
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>

    <script src="/lib/threejs/three.js-master/build/three.js"></script>
    <script src="/lib/threejs/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );


        var buffer_geometry=new THREE.BufferGeometry();
        var vertices=new Float32Array([
            -1.0,  0.0,  0.0,
             1.0,  0.0,  0.0,
        ])
        buffer_geometry.addAttribute('position',new THREE.BufferAttribute(vertices,3));


        var controls=new THREE.OrbitControls(camera, renderer.domElement);

        var material = new THREE.PointsMaterial({
            color:0x330000,
            transparent:true,
            // depthTest:false,
            blending:THREE.AdditiveBlending,
            size:.3,
        })

        var mesh = new THREE.Points( buffer_geometry, material );
        scene.add( mesh );

        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame( animate );

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Wes*_*ley 5

使用时Three.Points，点将按照它们在缓冲区中出现的顺序进行渲染。如果启用深度测试，您可能会看到不同的结果，具体取决于相机位置和视图方向。

由于您使用的是加法混合，因此解决方法可以是最后渲染点，并禁用深度写入。

var material = new THREE.PointsMaterial( {
     depthWrite: false,
     blending: THREE.AdditiveBlending
} )

mesh.renderOrder = 999;

Run Code Online (Sandbox Code Playgroud)

三.js r.86

归档时间：	8 年，4 月前
查看次数：	2568 次
最近记录：	8 年，4 月前