How to Create a Sphere with Only Edges

[XIYO]

Hello,

I’ve spent several hours trying to find the desired outcome, but I couldn’t find it anymore, so I’m asking here…

This is the desired result.

I want to place the camera in the center of this mesh and look out from the inside. Also, the sphere should rotate.

This is the first result.

The code is very cleanly designed, but there is a diagonal line in the middle, which is not the design I want.

This is the second solution.

I got the design I wanted, but the mesh is managed separately, so rotation is not possible.

What I want is to use MeshBuilder Sphere to create concise code that achieves the desired design and can rotate.

[dsaffo]

Two ideas.

1. Create a sphere in blender that only uses square faces instead of triangles and then use the wireframe rendering method.

2. Use your custom mesh code but with the linesytem meshbuilder that will create a single mesh from your points matrix that you can rotate and transform normally.

Babylon.js Playground

[Tricotou]

Hello

@XIYO

but there is a diagonal line in the middle

It’s because OpenGL is using only triangles, and the current Wireframe Shader is drawing them as is.

@XIYO

What I want is to use MeshBuilder Sphere to create concise code that achieves the desired design and can rotate.

Then it’s a perfect match for a nice Node Material Editor game !

---

Modulo on Y coordinates, applied on a LessThan boolean :

---

Then do the same but instead of the Y coord, take the horizontal angle.
This is acheived easily using the arctan2 function along with X and Z coordinates, applied as well on a LessThan boolean :

Finally, merge both in a MAX node :

---

Here is the Node Material if you want to edit
And here is the Playground loading this custom material

++
Tricotou

[XIYO]

awesome…

[qq2315137135]

@dsaffo

Create a sphere in blender that only uses square faces instead of triangles and then use the wireframe rendering method.

Example model of wireframe model exported with blender.

Babylon.js Playground (babylonjs.com)

The .obj is used only because it is better embedded in the Playground.

Steps in blender:
Edit Mode => Select All => Delete faces only => Check Export loose edges in export screen => Export.

[XIYO]

how about this way?

		const sphere3 = MeshBuilder.CreateSphere('sphere', { segments: 8, diameter: 2 }, scene);
		sphere3.position = new Vector3(0, 0, 0);
		sphere3.enableEdgesRendering(0.9999);
		sphere3.edgesWidth = 2; 
		sphere3.edgesColor = new Color4(1, 1, 0, 1); 

it is bad trick?

[roland]

Use GreasedLineTools with GreasedLine. This way you can utilize all the available features of it as variable colors, widths, textures, PBR material, etc…

Babylon.js Playground

https://doc.babylonjs.com/features/featuresDeepDive/mesh/creation/param/greased_line

PBR example:

Babylon.js Playground

[sebavan]

Always making it pretty @roland !!!

[roland]

Thank you @sebavan !

[XIYO]

I learned a good method today.

wire sphere | Babylon.js Playground (babylonjs.com)

Just changing the fill mode worked … But I don’t know why the color doesn’t appear on the playground. It works fine locally.

[11128]

set scene.ambientColor

Babylon.js Playground