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);

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?

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.

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!

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

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

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

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

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.

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

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

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

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.

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

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.

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

I take your example for understanding,

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

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

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
}
},

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;

}
`,

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);

gl_FragColor = vec4( vColor, 1.0 );
vec4 shapeData = texture2D( shape, gl_PointCoord );