Hi, I’ve just create this WebGL prototype of a globe made of evenly spaced dots that light up as you fly to any of the 236 countries on the planet using data-path=“travel/PK” .
Repo: GitHub - malikfaizanhaider/Interactive-globe: I Have to create this WebGL prototype of a globe made of evenly spaced dots that light up as you fly to any of the 236 countries on the planet. Interactive Globe
My repo might help a bit:
ctx_text.fillStyle = "black"; // ctx_text.textAlign = "center"; // ctx_text.shadowColor = "white"; // ctx_text.shadowBlur = 2; // ctx_text.shadowOffsetX = 1; // ctx_text.shadowOffsetY = 1; const text_width = ctx_text.measureText(name).width ctx_text.strokeText(name, 6, cvs_text.height - 6) ctx_text.fillText(name, 6, cvs_text.height - 6) let spriteMap = new THREE.CanvasTexture(cvs_text) spriteMap.needsUpdate = true; let spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap, color: 0xffffff, sizeAttenuation: false }); let sprite = new THREE.Sprite(spriteMaterial); p.cache_text[name_x_y] = sprite; let scale = 0.28 p.cache_text[name_x_y].scale.set(1 * scale, (cvs_text.height / cvs_text.width) * scale, 1 * scale) sprite.center = new THREE.Vector2(text_width / 2 / cvs_text.width, .5) const uv = new THREE.Vector2(nt.pos_x / 3600, 1 - (nt.pos_y / 1800))
let spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap, color: 0xffffff, sizeAttenuation: false }); let sprite = new THREE.Sprite(spriteMaterial); p.cache_text[name_x_y] = sprite; let scale = 0.28 p.cache_text[name_x_y].scale.set(1 * scale, (cvs_text.height / cvs_text.width) * scale, 1 * scale) sprite.center = new THREE.Vector2(text_width / 2 / cvs_text.width, .5) const uv = new THREE.Vector2(nt.pos_x / 3600, 1 - (nt.pos_y / 1800)) // let position = getPositionFromUv(mesh_earth, uv.x, uv.y) let position = getSpherePositionFromUv(uv.x, uv.y, 10.3) // if (position && !p.group_text.children.includes(p.cache_text[name])) { if (position) { p.cache_text[name_x_y].position.copy(position) } p.group_text.add(p.cache_text[name_x_y]) } // const uv = new THREE.Vector2(nt.pos_x / 3600, 1 - (nt.pos_y / 1800)) // let position = getSpherePositionFromUv(mesh_earth, uv.x, uv.y) // if (position) { // p.cache_text[name_x_y].position.copy(position)
I’m not yet add clickable, you can do it through raycast sprite.
An alternative to canvasTexture and sprite is https://github.com/felixmariotto/three-mesh-ui .
but now I’m trying to add marker’s, the clickable markers on specific countries. Please give me an direction to add markers on globe.