We Keep Coding

efficient way to render large scale terrestrial map in three.js

I need some guidance and help. I am new to three.js and want to make a terrain with given terrestrial map image for texture and given heightmap data.
For this, i have to deal with large scale terrestial map image like 4104x1856
If i create a plane mesh with such a large number of vertices and use height map in those vertices and map terrestian texture in that elevated surface, it becomes so slow.
For this, i created mesh of segments 4104x1856, but i am sure it is very oldschool and not optimum way of doing this.
I have two concern
can i do such a big scale in three.js ?
if yes, what are things that i should do in order to make it not only renderable but also efficiently interactivable.
Thank you in advance !!!

Three.js - How do I determine intersections between a Mesh and a Particle System?

I have a particle system using sprites which is an Object3D similar to the "interactive / points" example from three.js and a basic sphere mesh which follows my cursor.
https://threejs.org/examples/?q=point#webgl_interactive_points
What's the best way to determine when two of these objects intersect? I want to be able to push the particles with the sphere, but first I need an array of the points which are "inside the sphere". Thanks!

To know if a point is inside or outside the sphere, you can cast a ray from the point in a given direction. Then count the ray intesection with the sphere geometry's triangles. If the count is odd, the point is inside, else it's outside.
Some demo showing particles injection into a mesh is available here (same principle) https://github.com/heroncendre/Volpar

threejs line follow along geometry

I am looking for a way to draw a (poly)line around an object. I have a mesh where I need lines projected on so I can use this for my project.
For example I have this geometry: https://threejs.org/examples/webgl_materials_skin.html
No horizontal around the head. Going over the nose, ears and should be closed. I have thought about raycasting to the center of the object every 1 degree. But this will lose accuracy.
This is a really bad picture but gives the idea, I want to try and get the red line around the geometry as a new polyline:
Is there a way I can get a polyline out of the geometry at a specific height?

threejs clipping 'sphere' possible?

I'm looking to find out if its possible to create a sphere that handles clipping in threejs. At the moment I'm building a series of clipping planes to handle all directions as shown in the image, but this seems rather wasteful. If its just affecting a material property would it not be possible for a sphere or rect geo to do the same thing.
thanks in advance!

How do I render objects as 'icons' in three.js?

Say I have a nice spaceship rendered in my scene. I then zoom out and the ship becomes smaller. This is all quite simple to achieve. Now at some point I want to replace the spaceship object with a simple triangle representing the ship. At this stage the icon for the ship should be rendered instead of the ship. Obviously the triangle should move based on the ship's movement and my camera movements. The triangle should not change orientation, so even if I rotate the camera or have the ship roll the triangle should stay the same orientation. So on a canvas this would be very simple to do. I would just take the x and y components of the 3d object and draw my triangle at the coordinates. My problem is that I do not know how to draw on the WebGL canvas directly? Is it possible? If not do anybody have any pointers to strategies to get this done? I would be happy if I could get nudged in the right direction :) Thanks in advance.
Update : What I eventually decided to do was to use the orthographic camera overlay approach suggested below and in a couple of other places.

Use Sprite object for icon. Then place icon right between spaceship and camera in a specific distance from the camera (using Raycaster or just calculation).
Use of orthographic overlay as mentioned by #WestLangley is also possible. Since you would have to calculate ship's position relative to your canvas in this case, maybe you could even create pure HTML overlay using DIV and place your icon in it as IMG object.