Using THREE.js to incorporate a stroke above extruded text

Looking to enhance text with a horizontal line above it:

var geo = new THREE.TextGeometry("x", geometry_options);
var mat = new THREE.MeshBasicMaterial({color: 0, side:THREE.DoubleSide});
geo.computeBoundingBox ();
var vec = new THREE.Shape();
vec.moveTo(geo.boundingBox.min.x, geo.boundingBox.max.y);
vec.lineTo(geo.boundingBox.max.x, geo.boundingBox.max.y);
geo.addShape(vec);
var mesh = new THREE.Mesh(geo, mat);

Encountering a Javascript error when using geo.addShape(vec). Could use some guidance as I am still learning about THREE.js. Any assistance or alternate method for achieving this would be greatly appreciated.

javascriptthree.js

Answer №1

Try using geo.merge(vec.makeGeometry()); instead of geo.addShape(vec);.

However, keep in mind that your geometry is just a line without any polygons, so the result may not look as expected.

Alternatively, you can group two objects together: one mesh and one line. Here's an example:

 var all = new THREE.Object3D();
 var geo = new THREE.TextGeometry("x", geometry_options);
 var mat = new THREE.MeshBasicMaterial({color: 0, side:THREE.DoubleSide});
 geo.computeBoundingBox();
 var mesh = new THREE.Mesh(geo, mat);
 all.add(mesh);
 var vecg = new THREE.Geometry();
 vecg.vertices.push(
    new THREE.Vector3(geo.boundingBox.min.x, geo.boundingBox.max.y,0),
    new THREE.Vector3(geo.boundingBox.max.x, geo.boundingBox.max.y,0));
 var line = new THREE.Line(vecg, new THREE.LineBasicMaterial());
 all.add(line);

Finally, add scene.add(all); to incorporate these changes into the scene.

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

Creating a network of communication between API routes in NextJS

Can the fetch API be used within an API route in NextJs? I have a large handler and instead of having everything in one handler, I'd like to modularize it so that after completing a specific task (e.g., writing to a database), I can call another handl ...

javascriptreactjsnext.js

How to Align Text and Image Inside a JavaScript-Generated Div

I am attempting to use JavaScript to generate a div with an image on the left and text that can dynamically switch on the right side. What I envision is something like this: [IMAGE] "text" Currently, my attempt has resulted in the text showing ...

javascripthtmlcss

Matching regex only on complete strings, not on parts of strings

My goal is to dynamically add and remove strings to a textarea when values in a table are clicked. The functionality should allow users to select and deselect values in the table, with the selected values adding or removing themselves from the textarea. It ...

javascriptregexstring

VueJS1 flexible $parent.$parent method duration

Trying to utilize a parent function across multiple layers of nested child components. {{ $parent.$parent.testFunction('foo', 'bar') }} This approach currently functions, however, each time I navigate through levels in the hierarchy, ...

javascriptvue.jsvue-component

Invoke jQuery within a nested context once more in the jQuery method sequence

Is it possible to do something like this? jQuery(selector).jQuery(subselector).command(....) Here is the current code snippet: $(' .species') .filter(function () { return !$(this).data('hidden_code_ready'); } .wrapInner('<spa ...

javascriptjqueryjquery-selectors

Mastering the art of utilizing sequelize and promises effectively

I'm currently learning how to create apps using expressJS and Sequelize. I could really use some help as I'm more accustomed to sequential programming. My project involves two models: Todo (id, title) and TodoItem (id, content, complete, todoId). ...

javascriptnode.jsexpresspromisesequelize.js

What could be causing the error "Cannot read the state property of undefined" to occur in my code?

I am facing an issue with my constructor that suddenly stopped working and I can't seem to figure out why. Upon analyzing the data, it appears that at line 24, everything is being read correctly including props. However, just one line later when tryi ...

javascriptreactjs

AngularJS Accordion Component: A Handy Tool for Organ

I have been trying to implement an Accordion in my angular project by sending HTML structure from a controller. However, despite following the documentation closely, the Accordion is not displaying as expected. Here is a snippet of the code I am using: v ...

javascriptangularjs

Update the table that includes a php script

I have a piece of PHP code embedded within a table tag that displays text from a database. I am looking for a way to automatically refresh this table every minute with updated content from the database, without refreshing the entire page. While I have co ...

javascriptphpjqueryajax

Tips for creating a horizontal list within a collapsible card

When a user clicks on a button, I am dynamically populating a list of items. Despite using list-group-horizontal, I am unable to make it display horizontally. HTML code <div id="textarea_display" class="mt-2 "> <label&g ...

javascriptbootstrap-4

I've recently delved into the world of JavaScript and am currently working on creating a calculator website. However, I'm facing some challenges in getting it to function

I created a calculator code using HTML, CSS, and JavaScript for a website. However, due to my limited experience with JavaScript coding, I encountered some issues. Currently, I have only implemented the number input part (not operations or deletion), but w ...

javascripthtmlweb

Using various textures on a single geometry with multiple meshes

In my code, I have a loop that generates multiple Mesh objects with different geometries, as each mesh is associated with one texture. for( var i = 0; i < voxels.length; i++ ){ texture = almacen.textPlaneTexture(voxel.texto,color,voxelSize); materi ...

geometrytexturesthree.jsmesh

Get a document from a NodeJS Server with the help of Express

How can I improve my file downloading functionality in Node.js? Currently, when I try to download a PDF file from the server, the content is displayed as data instead of initiating the download process. I would like it to function similar to how it's ...

javascriptnode.jsexpressdownload

Creating a JSON structure using an array in Typescript

Here is an example of my array structure: [ { "detail": "item1", "status": "active", "data": "item1_data" }, { "detail": "item2", "status": ...

javascriptarraysjsontypescript

Using AJAX to dynamically edit and update PHP data

The information displayed on my index.php page is fetched from a database using the mysqli_fetch_array function. The data is presented in a table format with fields like Name, Age, Email, and Update. An edit button allows users to modify the data. Here is ...

javascriptphpjqueryhtmlajax

Combining HTML, CSS, JAVASCRIPT, and PHP for a seamless web development experience

As a beginner in web development, I have some knowledge of javascript, html, css and am currently delving into php. However, I am struggling to find comprehensive resources that show how to integrate all these languages together. I would greatly appreciat ...

phpjavascripthtmlcss

Introducing a fresh input field that includes a dropdown selection feature

When a user clicks on the "+" button, a new row should be added with a dropdown and input field. I want the input field name to be the dropdown value for each row. If "Facebook" is selected in the first dropdown, it should not appear in the second dropdo ...

javascriptphpjqueryhtmlcss

Select all elements using jQuery that have an id attribute and belong to a specific class

I am attempting to select all items with an ID attribute that starts with a specified string while also having a particular class. For instance, consider the following: <div id="test-id-1" class="test"></div> <div id="test-id-2" class="test ...

javascriptjqueryjquery-selectors

Generating and saving a text file in a React Native application

Is there a way to convert a string into a text file within the client application and then download it directly onto a phone? If so, how can this be achieved? ...

javascriptreactjsreact-nativeandroid-download-manager

Tips for extracting values from a JSON object

I have been attempting to retrieve the value from an array without success. Here is the current array: [{0: {value: 2, label: "ARKANSAS"}}] When I try to use JSON.parse(object), I encounter the error VM20617: 1 Uncaught SyntaxError: Unexpected ...

javascriptreactjsreact-hooks