The perplexing paradox of THREE.js line thickness

Upon reviewing the LineBasicMaterial THREE documentation, I came across a note stating that on Windows systems, the linewidth is automatically set to 1 and cannot be adjusted.

Interestingly, there is a fascinating example on threejs.org utilizing the same THREE version (r68) where the linewidth on a Windows system is altered from 1 to 5 and then back to 1 when the mouse hovers over a line in the scene.

With this in mind, my inquiry is whether this parameter can actually be changed, and if so, how can it be accomplished? I attempted to modify the material.linewidth simply by setting it to a different value, but unfortunately, it had no effect.

javascriptthree.jswidthline

Answer №1

The provided example utilizes the CanvasRenderer instead of the WebGLRenderer, which does indeed have built-in support for the lineWidth property. Conversely, the WebGLRenderer relies on the capabilities of the underlying WebGL implementation.

Interestingly, on Windows operating systems, both Chrome and Firefox typically utilize ANGLE (an abstraction layer on top of DirectX) by default, which unfortunately does not offer support for the lineWidth property. However, Firefox on Windows can be manually switched to OpenGL mode, potentially enabling support for lineWidth depending on the specific video card drivers in use.

It's worth noting that while Chrome does have a command line option to switch to OpenGL mode, this configuration is no longer officially supported and is known to cause startup issues. It's recommended not to attempt this change.

Answer №2

My assumption is that the documentation may be outdated in this case. It appears that the example you provided does in fact include the following code:

currentIntersected.material.linewidth = 5;

with the condition that 

currentIntersected instanceof THREE.Line
and 
currentIntersected.material instanceof THREE.LineBasicMaterial

Upon setting the value to 5, testing it retrieves a value of 5, resulting in the rendering of a thicker line. This behavior was confirmed on IE for Windows as well.

If this solution does not work for you, would you mind sharing your code in a jsfiddle or similar platform?

By the way, did you remember to call the render function?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the express.json() middleware for parsing JSON request body designed to handle synchronous calls?

According to Express.js's documentation, it is recommended to avoid using synchronous functions as much as possible. This is because in high-traffic websites, the accumulation of synchronous calls can negatively impact the performance of the applicati ...

javascriptnode.jsexpress

Challenge with Angular *ngFor: Struggling to Access Previous Elements

In my angular and node application, I am using socket.io. When a user joins the room, they can see their username in the user list. If another user joins, the first user can see both usernames but the new user can only see their own. This pattern continues ...

javascriptnode.jsangularsocket.iorxjs

Create a never-ending jQuery script that is simple and straightforward

My WordPress website features an accordion element that usually functions well by toggling classes when tabs are clicked. However, there is one issue where clicking on a tab does not automatically close other opened tabs. To address this, I added the follo ...

javascriptjquery

Show only upon initial entry: > if( ! localStorage.getItem( "runOnce" ) ) { activate anchor link

My JavaScript form performs calculations, but I only want it to display the first time a visitor enters the site. I attempted to add the following code before my script: jQuery(document).ready(function($) { if( ! localStorage.getItem( "runOnce" ) ) { ...

javascriptjquery

The image source failed to load the image using the function

Initially, I set up a sandbox to work on this issue: https://codesandbox.io/s/naughty-almeida-u66mlt?file=/src/App.js The main problem arises when the requested image fails to display after the function is called and the URL is returned. Here are my atte ...

javascriptreactjsgoogle-cloud-firestorefirebase-storage

Hiding a div upon submission using jquery validator

I need assistance with a validator that currently hides the submit buttons and displays a "please wait" message after the user clicks submit. The issue is that it also triggers this behavior when a date field validates. Is there a way to modify the code s ...

javascriptjqueryvalidation

Is it possible to change XML using Ajax technology?

Is it possible to update a value in an XML file using JavaScript/Ajax? I've managed to access the XML file with Ajax and utilize its values in my script. Now, I want to send any updates made by the script back to the XML file on the server using Ajax ...

javascriptxmlajax

Accessing Google Analytics with a single OAuth token using the JavaScript API: A step-by-step guide

I'm currently developing a webpage for exclusive users to view shared Google Analytics data. I have managed to obtain an OAuth token for the account housing this data using JavaScript, but sadly it expires in just 1 hour. Is there a way to utilize th ...

javascriptoauthgoogle-analyticstokengoogle-api-js-client

Is it possible to manually input values when printing a PDF instead of pulling them from the main HTML?

I am facing a challenge in adding a "Print PDF" option to my website because it is built using Ext.js, and therefore the code is not in HTML. Despite searching for ways to print a PDF from the site, all solutions I found involve using HTML. Is there any li ...

javascriptpdfextjspdf-generation

Unable to expand Bootstrap navbar due to collapsing issue

I recently implemented a collapsed navbar on my website using bootstrap. However, I'm facing an issue where it does not open when clicking on the hamburger menu. After researching various solutions for this problem and trying them out, none of them s ...

javascriptjqueryhtmlcsstwitter-bootstrap

The process of examining a function that includes the invocation of an additional API function in a NodeJS environment

I'm faced with a situation where I have a nested function inside another function. The second function is responsible for making an API call. However, in order to write a unit test for this scenario, I need to avoid actually making the real API call a ...

javascriptnode.jsjestjsmocha.jschai

Creating a variable in JavaScript

In my HTML body, I have set up a global variable named index with the value <%var index = 0;%>. This allows me to access it throughout the code. I'm trying to assign the value of $(this).val() to <% index %>, but I can't seem to get ...

javascriptjqueryhtmlnode.js

How to use node.js to add JSON data to a JSON file without using an array?

I'm trying to update a JSON file without using an array with FS. The desired format of the file should be: { "roll.705479898579337276.welcomemessage": "There is a welcome message here", "roll.726740361279438902.welcome ...

javascriptnode.jsjson

Switching on the click functionality

I was able to successfully toggle a boolean variable along with some other options. However, I encountered an issue when trying to create another click function for a different button to set the boolean variable to false. Here is my code: let manageme ...

javascripthtml

Error encountered while attempting to display a view when pressing TouchableOpacity in a React Native application

Having trouble rendering a view when pressing on a TouchableOpacity in my React Native app. Any suggestions for a solution? import React, { Component } from 'react'; import { AppRegistry, View, TouchableOpacity } from 'react-nati ...

javascriptreactjsreact-native

retrieve the source code from all .js links found within the document

There is a file labeled urls.txt. https://website.tld/static/main_01.js https://website.tld/static/main_02.js https://website.tld/static/main_03.js .... All the source code from every .js file in allsource.txt needs to be extracted. Instructions: To ge ...

javascriptlinuxbashhttpcurl

What is a way to leverage the array or object data within the method object in order to reference the specific link in VUEJS?

How do I utilize the "LINK" property in the methods object? You might be able to infer my intentions, but just in case, here's what I'm aiming for: In Vue.js, I am attempting to extract all the data from the Data method's object so that I ...

javascripthtmlvue.js

What are the different ways you can utilize the `Buffer` feature within Electron?

When attempting to implement gray-matter in an electron application, I encountered the error message utils.js:36 Uncaught ReferenceError: Buffer is not defined. Is there a method or workaround available to utilize Buffer within electron? ...

javascriptnode.jselectron

Why won't hover over function properly in separate divs for two items?

My goal is to show text when hovering over a logo, but the text and logo are in different divs. Despite trying various solutions like using display: none and display: block, I still can't get it to work. import styles from '../styles/Float.module ...

javascriptcssnext.jshoverjsx

The information was not displayed in the message exchange

I'm currently working on a project involving a google chrome extension where the content.js script sends a message to popup.js. I'm also attempting to take some text from content.js and display it in popup.js. Here is my entire code: Here's ...

javascriptgoogle-chrome-extension