Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Line Width in LineBasicMaterial #14627

Closed
4 of 13 tasks
joselevelsup opened this issue Aug 3, 2018 · 9 comments
Closed
4 of 13 tasks

Line Width in LineBasicMaterial #14627

joselevelsup opened this issue Aug 3, 2018 · 9 comments
Labels
Duplicate

Comments

@joselevelsup
Copy link

Description of the problem

So I have tried to adjust the linewidth in the LineBasicMaterial but it only renders out as 1 pixel instead of 5 (which is where I am trying to adjust). I have tried to preview this in Chrome, Firefox, and Safari but to no success. Any idea on why this isn't working. I read the docs and followed the way its used.

Three.js version
  • Dev
  • r95
  • ...
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
@Mugen87
Copy link
Collaborator

Mugen87 commented Aug 3, 2018 •
edited
Loading

Duplicate of #10357

Please have a look at the following example which renders lines based on triangles (so called Ribbons or MeshLines).

https://threejs.org/examples/#webgl_lines_fat

@Mugen87 Mugen87 closed this as completed Aug 3, 2018
@joselevelsup
Copy link
Author

Wait why was this closed? I tried the example and even went into the example's source code to try and replicate it but got no where. The linewidth still doesn't change. Also I get an error stating LineMaterial or LineGeometry is not a constructor. So this is still an issue.

@Mugen87
Copy link
Collaborator

Mugen87 commented Aug 3, 2018 •
edited
Loading

LineGeometry is part of the examples not of the core. You have to include the files from:

https://github.com/mrdoob/three.js/tree/master/examples/js/lines

@Mugen87
Copy link
Collaborator

Mugen87 commented Aug 3, 2018

BTW: You can change the line width in the example over the gui.

image

@joselevelsup
Copy link
Author

The only difference is that I am using Aframe/Threejs with React. Do you have a lead on how to import those files to use it?

@joselevelsup
Copy link
Author

I've seen the example and was trying so hard to replicate it in my project just to get thick lines.

@mrdoob
Copy link
Owner

mrdoob commented Aug 3, 2018

@joselevelsup keep trying! 💪

@Mugen87
Copy link
Collaborator

Mugen87 commented Aug 3, 2018

@joselevelsup The forum is the right place for help requests:

https://discourse.threejs.org/

@lshe7842
Copy link

lshe7842 commented Dec 9, 2018

Hey @joselevelsup , in case this is still a problem for you. What I did was to copy n paste the LineGeometry file out and then in the new file add var THREE = window.THREE || require('three'); on the top and then change all THREE.* namespaces. Then in your reactjs codes you can just do normal require from the new file.

@9inpachi 9inpachi mentioned this issue Mar 29, 2020
Closed
@psybuzz psybuzz mentioned this issue Jan 21, 2021
Merged
psybuzz added a commit to tensorflow/tensorboard that referenced this issue Jan 26, 2021
@psybuzz
line chart: restore thicker line width (#4590)
bbc0d2e 
WebGL enabled line charts have been using a thinner line thickness
by default, due to a limitation in WebGL [1]. A common workaround
is to render line thickness manually, turning each line segment into
a rectangle composed of 2 triangles. This change uses the approach
to restore the 2 pixel line width found in stable TensorBoard.

Notably, line segments used to be representable by 2 vertices are
now represented with 6 vertices (2 triangles), so performance is
expected to degrade.

This change does not take into account the "end caps" of each line,
so minor artifacts are noticeable when examining the joint between
two consecutive line segments carefully. Addressing the end caps
may require adding more triangles, which adds a decent amount
of complexity without significant noticeable benefit.

Manually checked by:
Adding `?fastChart=true#timeseries` to the URL to view WebGL enabled
line charts in Time Series.

[1] mrdoob/three.js#14627
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Duplicate
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mrdoob @joselevelsup @lshe7842 @Mugen87