Transparent cube with edges on sides


I want to create a transparent cube with only edges and display stacking of cubes inside. Each cube must have different colors without repetition. Any help at the earliest is much appreciated.

You should be able to implement the use case via EdgesGeometry. So the idea is to pass in the box geometry to EdgesGeometry and then render the resulting line data as LineSegments.

Live example: https://jsfiddle.net/3suk4x0d/1/

Mr.Mugen, Thank you very much for your reply. Could you please give me an example of 3 vertices of a cube ( just the dotted lines as in pic) without animation.

@Lakshmi
Use LineDashedMaterial() for dotted lines: https://jsfiddle.net/prisoner849/gcd9La58/

Prisoner, thank you very much for your reply. Could u please give me the example of dotted lines for the walls including the floor on those vertices as in the picture. Thank you in advance.

Here you are: https://jsfiddle.net/prisoner849/f06p4u5c/
Don’t forget to call .computeLineDistances() on Line object.

prisoner, thank you very much for all the support you had extended to me. As I am new to three js, unable to get through. I tried as per your guide lines. But the Wall line & Vertices are appearing separately. There should be only one Line that acts as Vertices and also as border of the wall. Could you please give me the complete solution of the picture I posted. I look forward for your support.

@Lakshmi
Would be great to show what you tried yourself, with description of what you do and what you want to get/achieve (using explanatory pictures, if possible).

1 Like

Prisoner, Using box geometry, Edges Geometry and line basic material ,created the complete cube as below

But i am expecting the out put to be as below.

Hope my write-up and pictures would suffice your requirement. Look forward for you support.

Have you tried to use LineDashedMaterial?

Prisoner, basically am a java programmer and NOT well versed with Three js. i haven’t tried LineDashedMaterial. As i am supposed to display the visual of the box in the java application, i am trying but miserable failing. I Hope you understood, what i need. If you could help me, that would be so great of you. Desperately working but of failing. I look forward for your support.

@Lakshmi
All you need to do is just to call .computeLineDistances() and apply that mentioned material to the box of edges, in the example provided by @Mugen87 : https://jsfiddle.net/prisoner849/9cuh8wrs/
изображение

Prisoner, Thank you very much for your support and guidance. The one you had given is a complete cube. But i have requested you for a Floor and 2 side walls of a cube. Please refer my expected picture. I look forward for your support and guidance. Once again thank you very much.

@Lakshmi
At all the respect, I won’t do your job for you.

The thing you’re requesting is something not basic.

There are several options:

  1. Create a topic in Jobs category.
  2. a) Create an object, containing 12 lines (box edges), each line has two normals - find dot-product of those normals with the view vectors in camera space, and if the result for both of them is negative, then set .visible property of a specific line object to false.
    b) Create a custom buffer geometry of pairs of points, where each pair defines a line of edge. Using a buffer attribute, add two normals to each point of each line egde. Do the same math, described in a), but now you process it in shaders, hiding lines with discard.
  3. Maybe my approaches are overcomplicated and somebody has easier/simpler ideas to share.

References:

  1. Way to hide Points if geometry is seen from backside? - #8 by prisoner849
  2. Get OrbitControls Azimuth Angle - #2 by prisoner849
  3. And maybe this one will be helpful too (thanks to @gkjohnson): LDraw-like edges
2 Likes

Why not just make 3 plane objects that represent the floor and both walls, merge those and then use edge geometry on them? It doesn’t get any easier than that IMHO.

1 Like

@Harold
True, if camera not moving around that box.

1 Like

Having Reference 1. and Option 2b), it’s possible to make this:
DashedBox

Prisoner,It seems you have got it. could you please share the jsfiddle link of this.

@Lakshmi have you read this thread ? It would help a lot

2 Likes

@Lakshmi
Could you please try to put some effort to the things you’re trying to achieve, and implement the approach suggested from @Harold?

To build such an object, you’ll need a geometry of 18 vertices (2 vertices per line, 9 lines) and LineDashedMaterial(). And don’t forget to call .computeLineDistances().

1 Like