Hello, Is there any possability to create an outline around a SphereGeometry which looks 2D and also rotate dynamically, so that when i move the camera (OrbitsControls) the outline is always correctly visible? Something like this: [image]

[image] lordmaddhi: …outline around a SphereGeometry which looks 2D and also rotate dynamically… This is a little bit unclear for me… because hard to imagine when object 2D rotating in 3D scenario, classical scenario… But anyway… you can make fake outline, by cloned mesh, for example… con…

The reference image looks like that you could just use sprites instead of spheres and outlines. https://codepen.io/boytchev/full/QWJOBrL [image]

It may not be that simple, because the circular outline of a sphere devolves into an ellipse-like shape when projected onto a (oblique) plane: [image] How to control perspective distortion of THREE.PerspectiveCamera Questions This is a normal and expected behaviour of how …

My suggestion is to use a sprite instead of the sphere and its outline altogether, not just the outline.

[image] lordmaddhi: a SphereGeometry which looks 2D @PavelBoytchev : I’m in fact a little confused by the co-existence of “sphere” (a 3D entity) which looks “2D” and a “2D outline” in the TO’s requirements. :thinking:

your approach is exactly what i wanted, but when i try it i get this: [image] Here is my Code: geometry = new THREE.SphereGeometry(0.1, 32, 32); material = new THREE.MeshBasicMaterial({ color: color, depthTest: false, opacity: 1, visible: true, }); const …

i tried it with the sprite approach, but they appear stretched and pixelated: [image] my code: var canvas = document.createElement( 'CANVAS' ); canvas.width = 64; canvas.height = 64; var context = canvas.getContext( '2d' ); context.lineStyle = 'black'; context.lineWidth = 3;…

[image] lordmaddhi: stretched and pixelated There could be various reasons for these, but as you are the only one who can debug the code, it is up to you to find the actual cause and fix it. For example, stretching could be caused by unadjusted perspective matrix, and pixelation is because th…

Could you make your CodePen with that?

ok so i made a codepen and it works: https://codepen.io/LordMaddhi/pen/OPPOQzM?editors=0011 i figured out that it my project it works when i delete the sphere.position.copy(position) line. i logged the position: Vector3 {x: -0.02214988201910069, y: -0.0039832370587698784, z: -0.01780832572595914…

[image] lordmaddhi: i figured out that it my project it works when i delete the sphere.position.copy(position) line. sphere.position.copy(new THREE.Vector3(-1, -1, -1)) This line displaces the sphere from the coordinate origin, which btw. coincides with the default OrbitControls.target . As…

SphereGeometry with 2D Outline

Questions

vielzutun.ch April 28, 2025, 12:11pm 5

It may not be that simple, because the circular outline of a sphere devolves into an ellipse-like shape when projected onto a (oblique) plane:

Topic		Replies	Views
How to render full outlines as a post process - tutorial Resources post-processing	22	26182	February 5, 2024
Bounding sphere projected height on screen Questions camera , bounding-box , perspective-projection	28	2650	October 8, 2022
How to create a simple outline around a PNG sprite? Resources sprites , help-wanted	9	6189	April 9, 2019
Getting unfolded SphereGeometry 2D plane Questions geometry , camera	5	973	May 20, 2022
Clipping circles on a sphere Questions	0	57	July 21, 2024

SphereGeometry with 2D Outline

Related topics