jupyter-widgets / pythreejs

A Jupyter - Three.js bridge
https://pythreejs.readthedocs.io
Other
943 stars 188 forks source link

Issue with LineMaterial (and LineDashedMaterial)? #394

Open nvaytet opened 1 year ago

nvaytet commented 1 year ago

I am trying to created a dashed line, as in this example.

Using LineBasicMaterial produces a solid line as expected:

x = [0, 10, 20, 30]
y = [0, 10, 0, 10]
a = array=np.array(
            [x, y, np.zeros_like(x)],
            dtype='float32').T

geometry = p3.BufferGeometry(
    attributes={
        'position':
        p3.BufferAttribute(array=a),
    })

material = p3.LineBasicMaterial(color='red', linewidth=10)
line = p3.Line(geometry=geometry, material=material)
line

Screenshot at 2023-01-17 14-08-53

However, when using either LineMaterial or LineDashedMaterial, no line is visible:

x = [0, 10, 20, 30]
y = [0, 10, 0, 10]
a = array=np.array(
            [x, y, np.zeros_like(x)],
            dtype='float32').T

geometry = p3.BufferGeometry(
    attributes={
        'position':
        p3.BufferAttribute(array=a),
    })

material = p3.LineMaterial(color=color, linewidth=10)
# material = p3.LineDashedMaterial(color='red', linewidth=10)
line = p3.Line(geometry=geometry, material=material)
line

Am I doing something wrong, or is it a bug? Thanks!

nvaytet commented 1 year ago

I also tried with LineGeometry, which shows nothing with LineBasicMaterial, and shows something strange with LineMaterial:

x = [0, 10, 20, 30]
y = [0, 10, 0, 10]
a = array=np.array(
            [x, y, np.zeros_like(x)],
            dtype='float32').T

geometry = p3.LineGeometry(positions=a)
material = p3.LineMaterial(color=color, linewidth=10)
line = p3.Line(geometry=geometry, material=material)
line

Screenshot at 2023-01-17 15-14-45

vidartf commented 1 year ago

LineMaterial is an "extra" material, but it seems it only supports LineSegments2 (also extra). I see that a Line2 object was also started, but only supports Geometry for the geometry attribute. Please consult the ThickLines example as much as possible: it also outlines the shader that is used, and some of the options available.