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…

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

PavelBoytchev April 28, 2025, 11:11am 4

The reference image looks like that you could just use sprites instead of spheres and outlines.

https://codepen.io/boytchev/full/QWJOBrL

7 Likes

Topic		Replies	Views
How to render full outlines as a post process - tutorial Resources post-processing	22	25812	February 5, 2024
Bounding sphere projected height on screen Questions camera , bounding-box , perspective-projection	28	2576	October 8, 2022
How to create a simple outline around a PNG sprite? Resources sprites , help-wanted	9	6153	April 9, 2019
OutlinePass for child meshes Questions outlinepass	5	3960	August 27, 2021
Getting unfolded SphereGeometry 2D plane Questions geometry , camera	5	951	May 20, 2022

SphereGeometry with 2D Outline

Related topics