How can I create a box-shaped outline using Three.js?

As someone new to threejs, I have been trying to figure out how to render a transparent box around a symbol in my canvas. The box should only display a border and the width of this border should be customizable.

Currently, I am using wireframe to create a box-like shape but I am unable to increase the width of the wireframe beyond 1. According to the documentation, it is not possible to set wireframeLinewidth to a value greater than 1.

To learn more about this, you can visit .

The current code implementation looks like this:

const material = new THREE.MeshBasicMaterial({
  color: feature.color,
  opacity: 0.75,
  transparent: true,
  side: THREE.DoubleSide,
  wireframe: true,
  wireframeLinewidth: 1
});

If anyone knows a way to create a transparent box with a configurable border width in threejs, please share your insights.

javascriptcssangularthree.js

Answer №1

Is there a way to create a transparent box-like shape with adjustable border width in threejs?

Using WebGL line primitives will typically result in lines that are only 1px wide. However, it is possible to create wireframes with configurable width. An official example showcasing this technique can be found here:

The THREE.Wireframe class renders its line geometry as triangles, allowing for wider or "fat" lines to be created. By importing the necessary classes like LineMaterial and WireframeGeometry2, you can implement this feature in your project.

three.js R107

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

Guidelines for utilizing a loader to handle a TypeScript-based npm module

I am currently facing a challenge with my React and JavaScript project as I attempt to integrate an npm module developed with TypeScript. The issue lies in configuring my project to compile the TypeScript code from this module, resulting in the error messa ...

javascripttypescriptnpm

The JavaScript confirm function will provide a false return value

Is it necessary to display a confirmation message asking "Are you sure ..."? I have implemented the message, but the function return false; is not working when the user clicks NO. <script> function confirmDelete(){ var answer = confirm("Are you su ...

javascriptconfirm

What is the best way to align text with my CSS number and circle on the same line?

Here are two questions for you: First off, I've successfully created a circle with a number inside it using CSS. How can I go about filling the circle with color? Secondly, I'd like to know how I can align the words "Opportunity #1" on the same ...

htmlcss

Learn a valuable trick to activate CSS animation using a button - simply click on the button and watch the animation start over each time

I already know how to do this once. However, I would like the animation to restart or begin again when the user clicks on it a second time. Here is what I have: function animation() { document.getElementById('ExampleButton').className = &apo ...

javascripthtmlcssanimationbutton

Horizontally position the main word from the D3-WordCloud in the center

I am working on a WordCloud project and have utilized code from Jason Davies D3-JavaScript-WordCloud Example, which can be found at this link. The majority of the code I have used is from a helpful tutorial in German by Lars Ebert, available at this URL. ...

javascriptd3.jsalignmentcenterwords

What is the recommended TypeScript type for the NextJS _app.tsx Component and pageProps?

Take a look at the default _app.tsx code snippet from NextJS: function MyApp({ Component, pageProps }) { return ( <Component {...pageProps} /> ) } The issue arises when transitioning to TypeScript, as ES6Lint generates a warning indicating t ...

javascriptreactjstypescriptnext.js

What steps should I take to correct the scoring system for multi-answer questions in my Angular quiz application?

When answering multiple-choice questions, it is important to select ALL of the correct options in order to increase your score. Selecting just one correct answer and then marking another as incorrect will still result in a score increase of 1, which is not ...

angulartypescript

Is there a way to modify the background color with Bootstrap?

While following a Bootstrap tutorial, I stumbled upon an issue that I can't seem to resolve. In my layout, I have an article and a sidebar in a row, with the article taking up 9 columns and the sidebar taking up 3 columns. The background color of the ...

htmlcsstwitter-bootstrap

Horizontal line chart in Chart.js or a customized version of the horizontal bar chart

I'm currently using chart.js to create a timeline showcasing events in relation to the current date. While the horizontal bar chart is useful, I would prefer displaying only the tips of the bars as points essentially transforming it into a horizontal ...

javascriptchart.js

"Combining the power of Node.js, mysql, and socket.io

As a beginner with socket.io, I am facing an issue. How can I update and display real-time data from a table in my database without having to restart the node.js server? The table receives new data every 10 seconds. I have followed several tutorials but h ...

javascriptmysqlnode.jssocket.io

The patchState function is iterated within the NGRX component-store effect

My program is stuck in an infinite loop and I can't figure out why. interface LatestAppointmentsWidgetState { loading: boolean; page: number; pagedData: Paged<Appointment>; } @Injectable() export class LatestAppointmentsWidg ...

angularngrxngrx-component-store

Combining JSON arrays into a single multidimensional array

I have received the following JSON data from an API, and unfortunately, I do not have control over its format. Hence, changing the format is not feasible for me. I am facing difficulty in combining this JSON data into a single JSON array. My goal is to pr ...

javascriptjqueryjson

Implement Php gettext functionality in Typescript

I have a keen interest in AngularJs 2, and I am planning to incorporate it into my upcoming project. I would like to integrate i18n with Php gettext. In a previous project, I utilized Php gettext by embedding Php within Javascript code as shown below: // ...

phpangulartypescriptgettext

Adjust the position of elements based on their individual size and current position

I am faced with a challenge regarding an element inside a DIV. Here is the current setup... <div id="parent"> <div id="child"></div> </div> Typically, in order to center the child within the parent while dynamically changing i ...

javascriptjqueryhtmlcss

Incorporating CSS code directly into a PHP webpage instead of linking to an external CSS

I've been struggling to find a solution for this issue. I am trying to figure out how to insert CSS code into my PHP page. My PHP page contains scripts and uses echo to display HTML elements when the page loads. Among these elements are three forms w ...

phphtmlcss

Ways to position Drop-down menu flush against the left edge of the webpage?

I am facing a challenge in customizing my CSS3 Mega drop-down menu. I want the mega menu to start from the left side of the main page, beginning from the home button area and extending all the way to the end. Currently, it is appearing where the parent men ...

htmlcss

Barba.js Revolutionizes Page Reloading for Initial Links

On my Wordpress site, I am using Barba js v.2 for page transitions. However, I have encountered an issue where I need to click on a link twice in order to successfully change the page and make the transition work. Interestingly, the first time I click on t ...

javascriptphphtmlwordpressbarbajs

Next.js is causing me some trouble by adding an unnecessary top margin in my index.js file

I started a new project using next.js by running the command: yarn create next-app However, I noticed that all heading and paragraph tags in my code have default top margins in next.js. index.js import React, { Component } from "react"; import ...

javascriptcssreactjsnext.jsjsx

ReactJS - What makes ReactJS unique compared to other technologies?

Hey there! I'm currently trying to figure out why this specific code snippet was successful while my previous one wasn't. I've included both snippets below: SUCCESSFUL CODE: handleInputChange = (e) => { let { value } = e.target; ...

javascriptreactjsreact-redux

Angular9 integrated with Firebase to enhance the capabilities of

I am facing an issue with displaying a specific element from the database. //component.html <section class="firee"> <figure class="snip1208"> <div *ngFor="let scholarship of scholarships" > <h3>{{scholarshi ...

angularfirebasefirebase-realtime-databaseangularfire2