Is THREE.js disregarding the line thickness when using a BufferGeometry with LineBasicMaterial in a THREE.Line object?

Here is a minimal test case I've put together that showcases my issue: http://pastebin.com/TPXFgxLj

The desired outcome should be a set of red lines with a line width of 19. However, the current result shows a set of red lines with what appears to be a linewidth of 1.

I have experimented with the opacity option of the material and found that changing it to 1 does indeed produce a more opaque set of lines. The color also appears to be applied correctly. So why isn't the line width being reflected?

If anyone has any insights or suggestions on what could be causing this discrepancy, I would greatly appreciate it!

javascriptthree.jswebgl

Answer №1

The issue has been identified as a bug and has been successfully resolved in the latest r56 dev branch.

Answer №2

If you're using Windows, you may be experiencing an ANGLE issue that prevents changing the line width. More information can be found in this related question.

UPDATE: In certain cases involving THREE.BufferGeometry, the inability to adjust material.linewidth within THREE.LineBasicMaterial was identified as a bug. This has since been rectified in the current r56dev branch.

This pertains to three.js r.55

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

What is the best method for submitting information using AJAX and jQuery?

Here is the HTML code in question: <script src='https://code.jquery.com/jquery-1.12.4.min.js'></script> <p>1</p> <!-- this content gets loaded with <?php echo $item->id; ?> --> <a id='delBtn1' ...

javascriptphpjqueryajax

Create automated scripts with Selenium using the programming language JavaScript

Is it possible to create selenium webdriver scripts using only javascript? If so, what are the benefits of choosing javascript over languages like java or C#? In what situations would javascript be the preferred option? Appreciate your insights. ...

javascriptseleniumwebdriver

There was an issue encountered while parsing the JSON data - "SyntaxError: Unexpected token . was caught."

Encountering an error in Chrome while parsing JSON data. The JSON sample can be found at this link. It is valid JSON and the server is sending the correct Content-Type value (application/json). Uncaught SyntaxError: Unexpected token . Firefox shows a sli ...

javascriptjqueryjson

The program encountered an issue: Initialization must be completed before utilizing hooks

I'm facing an issue with my new Next app. I added line no. 6 and now I'm getting an error. Can anyone help me understand why? https://i.sstatic.net/lMKH5.png import Head from "next/head"; import Image from "next/image"; impor ...

javascriptreactjsnext.jsblockchain

React css modules to enhance styling in your web project

I am in the process of incorporating a CSS module into the login component. Currently, I have a style.css stylesheet located in the src/styles folder, which is responsible for loading global styles. However, I now want to customize the login component by a ...

javascriptcsswebpackwebpack-style-loader

What is the best way to save a table to local storage in HTML after dynamically adding rows using JavaScript or AngularJS?

I came across this code on the following link. http://codepen.io/akashmitra/pen/eNRVKo HTML <div ng-app="app" ng-controller="Ctrl"> <table class="table table-bordered table-hover table-condensed"> <tr style="font-weight: bold"> ...

javascriptjqueryhtmlangularjslocal-storage

Words within a string are divided in the center, with JS and CSS involved

I'm currently working on developing a hangman game in JavaScript (I am new to web technologies) and I have come across my first challenge. The placeholder string for the word to be guessed, which consists of hyphens and spaces, is overflowing from the ...

javascriptcsscss-hyphens

Determine the number of JavaScript functions present on a webpage using JavaScript

Hey there! I'm interested in counting the javascript functions on a specific page and then sending this count via ajax. Do you think it's possible to do this using javascript? What would be the best approach? Thanks in advance! Just to explain f ...

javascriptjqueryajaxfunction

I'm having trouble with Google Map InfoWindows not displaying when clicked within a loop

I'm facing an issue where the info window on Google Map API doesn't open on click within a loop, although all info windows show with an outside click event. var map; function initMap() { var mapProp = { center: new google.maps.LatLng( ...

javascriptgoogle-mapsclickinfowindow

Retrieving precise information from a Json file with PHP

Hey there, I have a JSON file and I'm looking to extract certain data from it. Here's how the file appears: { "took" : 1, "timed_out" : false, "_shards" : { "total" : 1, "successful" : 1, "skipped" : 0, "failed" : 0 }, ...

javascriptphpjqueryjsonelasticsearch

Order of execution in Single Page Applications when using multiple files: understanding the Javascript async defer concept

I am currently working on enhancing the performance of my webpage, which is built using EmberJS. One strategy I'm considering is utilizing `asyc` and `defer` attributes for our Javascript files. I have already implemented other optimizations such as ...

javascripthtmlperformanceasynchronousdeferred

attempting to employ the method of copying by converting result into a JSON string

Currently, I am utilizing the browser console to scrape and organize content with JS. Below is the code snippet: This represents my result array var arr = [ "George\nPresident & Founder", "content", "Ronald\nCount ...

javascriptarraysjson

Is there a way to send an array with data to a different component using react-redux within a Higher Order Component (H

It seems like I'm missing something because I can't seem to find any examples of how to pass an array with data from a Higher Order Component (HOC) to another component. Here is the code snippet: import React from 'react' import NoAc ...

javascripthtmlreactjs

Three.js failing to display content

When I attempt to render a Blender model using the code below (starting with the default cube), nothing appears on the screen: <html> <head> <title>Testing page for the </title> <meta name="viewport" content= ...

html5-canvasthree.jsrender

Getting the http response content of a Slim PHP API with Angular JS: A step-by-step guide

My Slim PHP programmed API sends JSON responses in the following format: $response['some-text'] = 'blabla'; $app->response->setStatus(200); $app->response()->headers->set('Content-Type', 'application/json& ...

javascriptphpjsonangularjs

Implement an onClick event to the newly created th element using document.createElement()

Through the use of document.createElement("th"), I am dynamically inserting columns into a table. var newTH = document.createElement('th'); Is there a way to add an onClick attribute to this element so that users can delete a column by clicking ...

javascripthtml-table

Should JavaScript be referenced at the start or generated dynamically?

As I continue working on my small web application, I've noticed that the amount of Javascript is increasing. I'm curious about the best practice for loading/referencing Javascript - should it all be loaded at once at the beginning or dynamically ...

javascriptajaxjquery

Troubleshooting: Issue with onclick event in vue.js/bootstrap - encountering error message "Variable updateDocument not found"

As a newcomer to frontend development, I have a basic understanding of HTML5, CSS, and Javascript. Recently, I started working on a vue.js project where I integrated bootstrap and axios. Everything seemed to be working fine until I encountered an issue whe ...

javascriptvue.jsaxiosfrontendbootstrap-5

Fixed div at the bottom of the page that will stick to the top

Currently, I have a holding page for my website that is functioning as desired. It features some Vegas-style background fades and a simple navigation bar at the bottom fixed to the page with the following CSS: Position: absolute; bottom: 0; You can view ...

javascriptjqueryhtmlcss

What causes the appearance of a nested URL like '/auth/auth/ ' when the original URL does not exist?

While following a tutorial, I encountered an issue where if the URL is not included in the routes.ts file, it redirects to a nested /auth/auth/...../login/ instead of redirecting to localhost:3000/auth/login middleware.ts import authConfig from "./au ...

javascriptreactjsnext.jsnext-auth