Points cover line and unreal bloom point

Questions
1

I’m trying to get the points to show up to cover the line and show the points that are behind.

points
points1920×979 167 KB

Is it possible to make points have an aura around like this?

image
image550×514 47.2 KB

Can you help me?
Thank you.

 var scene = new THREE.Scene();
                var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

                var renderer = new THREE.WebGLRenderer({
                antialias: 1
                });

                renderer.setClearColor(0xff1100);
                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);

                scene.add( new THREE.AmbientLight( 0x404040 ) );

				const pointLight = new THREE.PointLight( 0xffffff, 1 );
				camera.add( pointLight );

                scene.fog = new THREE.Fog(0x355060, 8, 20);

                // Create vertex points
                var mesh = new THREE.IcosahedronGeometry(12, 10); // radius, detail
                var vertices = mesh.vertices;
                var positions = new Float32Array(vertices.length * 3);
                for (var i = 0, l = vertices.length; i < l; i++) {
                vertices[i].toArray(positions, i * 3);
                }
                var geometry = new THREE.BufferGeometry();
                geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

                var material = new THREE.PointsMaterial({
                size: 0.4,
                map: new THREE.TextureLoader().load( 'disc.png' ),
                transparent: false,
                sizeAttenuation: true,
                alphaTest: 0.7,
                color: 0xFFFFFF,
                blending: THREE.AdditiveBlending,
                transparent: true,
                side: THREE.DoubleSide
                });
                var points = new THREE.Points(geometry, material);

                var object = new THREE.Object3D();

                object.add(points);



                object.add(new THREE.Mesh(
                mesh,
                new THREE.MeshPhongMaterial({
                    color: 0xFFFFFF,
                    emissive: 0x355060,
                    wireframe: true,
					transparent: true,
                    side: THREE.DoubleSide
                })

                ));

                scene.add(object);
                scene.background = new THREE.Color( 'black' );

                camera.position.z = 20;

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

                object.rotation.x += 0.0001;
                object.rotation.y += 0.0001;

                renderer.render(scene, camera);
                };

                render();
2

In this three.js selective bloom example, layers are used to control which geometry the bloom effect is added to. Hope this helps

1 Like
3

new THREE.PointsMaterial({ depthTest:!1 });

Side-effect: always being rendered.

4

I tried but all the points are below the line.

image
image1920×979 162 KB

5 
var material = new THREE.PointsMaterial({
depthTest:!1,
size: 0.4,
map: new THREE.TextureLoader().load( 'disc.png' ),
transparent: false,
sizeAttenuation: true,
alphaTest: 0.7,
color: 0xFFFFFF,
blending: THREE.AdditiveBlending,
transparent: true,
side: THREE.DoubleSide
});

Make sure disc.png is preloaded before assigning it to a map.

If you still having problems, provide a working demo please.

6

It still doesn’t work.
Can you help me check it?
Thank you.

7

Disc.html (1.9 KB)

1 Like
8

The problem with transparent point geometry on a sphere is that the order of individual points in the geometry buffer needs to be changed every frame, so they are sorted by the distance from the camera, otherwise points on the back of the sphere will be rendered on top of those that are at the front.

1 Like
9

The problem has been resolved. Thank you so much!