Particle system in latest version

Questions
, ,
1

Hi all. I’m new al threejs. I’ve created earth with tranparent contur and aad with FOR 360180 spheres 2.22.2. And it’s very hard to render. I want to achive result like in https://2050.earth/.

Here my code:

let R = 605.5;
let geometry = new THREE.SphereGeometry(2.5, 2.5 );
let material = new THREE.MeshBasicMaterial( {
color: 0xffffff,
opacity: 1.0
} );
for (var lon = 0, lat=-89; lon < 360, lat <90; lon=lon+1) {

var phi   = (90-lat)*(Math.PI/180);
var theta = (lon+180)*(Math.PI/180);

let xrad = -((605.5) * Math.sin(phi)*Math.cos(theta));
let zrad = ((605.5) * Math.sin(phi)*Math.sin(theta));
let yrad = ((605.5) * Math.cos(phi));




let plane = new THREE.Mesh(geometry,material);

plane.position.x = xrad;
plane.position.y = yrad;
plane.position.z = zrad;
group.add(plane);
planes.push(plane);

if ((lon >= 360)) {lat=lat+3; lon = 0;}
}

And i have take a look at examples on threejs.org with https://threejs.org/examples/#webgl_interactive_raycasting_points
and if i use it in my project -> THREE.PointCloudMaterial are not a constructor, PointsCloud too, etc. How can i do particles on the planet sphere like on 2050.earth/ site?

2

Hi!
Have a look at the documentation.
THREE.Points()
THREE.PointsMaterial()
Also, have a look into the Resources category of the forum. There you can find some stuff about your question.

3

Hi! Ive resolved problem with point, sorry 4 question, but how can i cut off points, wich are not in range of earth ground? eromulon.pro - result before cutting off. Thanks a lot!

4

Did you try to read the stuff from the link to the “Globe of points” topic?

5

Sorry, started read right now. Thanks for answer!

6

We can cut off Points only with textures? Or how can i change shader for not 2d textured points?

7

Did I get it correclty, that you want to use thousands of spheres? What about performance in this case?

8

If we use just Points without texture, they are just 2d?

9

And sorry for stupid questions, how can i displace points cross to the cross ? If i use just points without shader material, i just write 1 for cicle for that, but now i can.t understand.

10

No offense, but it seems that you have to put a little more effort for better understanding about how the things work: THREE.BufferGeometry(), THREE.BufferAttribute(), THREE.ShaderMaterial() and shaders, THREE.Texture() and UV coordinates.

Could you clarify it with a picture? Do you meant that points form crosswise lines?

1 Like
11

https://i.imgur.com/XHB9kAi.png smth like that

12

Yep, i need make all dots crosswise. I’ve tried make it with offset, but its not what i need.

13

From the scratch, you need to apply an angular shift (((PI * 2) / radialSegmentsCount) * 0.5) to every 2nd row of points, if we’re talking about points in a sphere geometry.

14

Sorry for nooby questions, i just need to do these dots like in https://i.imgur.com/s2rFHMQ.png with 0.5 offset, but cant understand how to make offset for each vertex

15

I understand, but can u give a example in your snippet, where should i apply shift and how can i apply it to some points in geometry.

16

Could you provide a live code example of what you’ve tried?

17

I take your example for understanding,

var geom = new THREE.SphereBufferGeometry(601, 200, 100);
var colors = [];
var color = new THREE.Color(0xffffff);

var loader = new THREE.TextureLoader();

loader.setCrossOrigin('');

var texture = loader.load('contour2_15.png');

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);

var disk = loader.load('https://threejs.org/examples/textures/sprites/circle.png');

var points = new THREE.Points(geom, new THREE.ShaderMaterial({
  vertexColors: THREE.VertexColors,
  uniforms: {
  visibility: {
  value: texture
},
  shift: {
  value: 0
},
  shape: {
  value: disk
},
  size: {
  value: 15
},
  scale: {
  value: window.innerHeight / 2
}
},





vertexShader: `

  uniform float scale;
  uniform float size;
  varying vec2 vUv;
  varying vec3 vColor;
  
  void main() {
    vUv = uv;
    vColor = color;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_PointSize = size * ( scale / length( mvPosition.xyz )) * (0.3 + sin(uv.y * 3.1415926) * 0.6 );
    gl_Position = projectionMatrix * mvPosition;

  }
  `,



  fragmentShader: `
      uniform sampler2D visibility;
  uniform float shift;
  uniform sampler2D shape;
  
  varying vec2 vUv;
  varying vec3 vColor;
  

  void main() {
  	
    vec2 uv = vUv;
    uv.x += shift;
    vec4 v = texture2D(visibility, uv);
    if (length(v.rgb) > 1.0) discard;

    gl_FragColor = vec4( vColor, 1.0 );
    vec4 shapeData = texture2D( shape, gl_PointCoord );
    if (shapeData.a < 0.0625) discard;
    gl_FragColor = gl_FragColor * shapeData;
	
  }
  `,
  transparent: false
}));
scene.add(points);
18

and eromulon.pro with live

19

:thinking: Do you really think that the source code of your live example is comfortably readable for humans?

20

I’ve just take code from your 1st link and work with it.