question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

LineBasicMaterial.linejoin not work

See original GitHub issue
Description of the problem

when I set LineBasicMaterial.linejoin as ‘bevel’ or ‘miter’,it not work.The appearance of line joints always be ‘round’.

renderer = new THREE.CanvasRenderer();

var material = new THREE.LineBasicMaterial({
        color: 0x0000ff,
        linewidth: 25,
        linecap: 'round',
        linejoin: 'miter',
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
        new THREE.Vector3( -10, 0, 0 ),
        new THREE.Vector3( 0, 0, 20 ),
        new THREE.Vector3( 10, 0, 0 )
);

var line = new THREE.Line( geometry, material );
scene.add( line );

image

Three.js version
  • Dev
  • r85
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Mugen87commented, Oct 16, 2018

CanvasRenderer has been removed, see #15029

1reaction
WestLangleycommented, Jul 3, 2017

I think this is because with CanvasRenderer, the line is rendered as a sequence of individual line segments:

ctx.moveTo(10, 10);
ctx.lineTo(200, 150);

ctx.moveTo(200, 150);
ctx.lineTo(300, 100);

instead of:

ctx.moveTo(10, 10);
ctx.lineTo(200, 150);
ctx.lineTo(300, 100);

Hence, linecap is honored, but linejoin is not.

Read more comments on GitHub >

github_iconTop Results From Across the Web

LineBasicMaterial – three.js docs
This corresponds to the 2D Canvas lineCap property and it is ignored by the WebGL renderer. # .linejoin : String. Define appearance of...
Read more >
How to put THREE.LineBasicMaterial in Aframe - Stack Overflow
Material and LineBasicMaterial do not have 'wireframe' so I don't know how to make this work without just adding wireframe in and 'hacking' ......
Read more >
THREE.LineBasicMaterial - Learn Three.js - Third Edition [Book]
In practice, the results from changing this property are very difficult to see. This property isn't supported on WebGLRenderer . linejoin. Defines how...
Read more >
Materials you can use for a line geometry | Learning Three.js
LineBasicMaterial : The basic material for a line allows you to set the colors , linewidth , linecap , and linejoin properties. THREE....
Read more >
LineBasicMaterial - Three.js
LineBasicMaterial ( { color: 0xffffff, linewidth: 1, linecap: 'round', // ignored by WebGLRenderer (игнорируется WebGLRenderer'ом) linejoin: 'round' ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found