Creating a cutout effect on 3D text within a Geometry using Three.js

I am looking to convert my 3D text into Geometry so that I can utilize it with CSG (I have also used a Three.js CSG wrapper) in order to subtract it from another object, similar to the scenario described in this question.

Here is my 3D text:

loader.load('optimer_regular.typeface.json', function (font){
    var text = new THREE.TextGeometry('Tayst', {
        font: font,
        size: 4,
        height: 3
    });
    var textMat = new THREE.MeshBasicMaterial({color: 0xffffff});
    var textGeo = new THREE.Mesh(text, textMat);
    textGeo.position.x = -7;
    textGeo.position.z = 6;
    scene.add(textGeo);
});

This is what I want to do for the 3D text (adapted from working with circles):

var dots = new THREE.Geometry();
    for(var i = 0; i < coordinates.length; i++){
        var coords  = coordinates[i];

        sphereMesh.position.x   = coords[0];
        sphereMesh.position.y   = coords[1];
        sphereMesh.position.z   = coords[2];

        sphereMesh.updateMatrix();
        dots.merge(sphereMesh.geometry, sphereMesh.matrix);
    }

var sphereCsg = THREE.CSG.toCSG(dots);

var resultGeo = THREE.CSG.fromCSG(resultCsg.subtract(sphereCsg));

cube = new THREE.Mesh(resultGeo, material);

However, it seems like I need to convert my text into a proper Geometry in order to proceed with the subtraction process.

Answer №1

I recently discovered a solution using the library I already had, which eliminated the need for performing the "merge" operation.

For those who may find it useful, here is the functional code:

var loader = new THREE.FontLoader();
loader.load('helvetiker_regular.typeface.json', function (font){
    var text = new THREE.TextGeometry('Test', {
        font: font,
        size: 4,
        height: 0.5
    });
    var textGeo = new THREE.Mesh(text);
    textGeo.position.x = -5;
    textGeo.position.z = 7.5;

    var txtCsg = THREE.CSG.toCSG(textGeo);

    var resultGeo = THREE.CSG.fromCSG(resultCsg.subtract(txtCsg));

    cube = new THREE.Mesh(resultGeo, material);
    scene.add(cube);
});

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

The form validation feature is not functioning as expected when integrating mui-places-autocomplete with MUI React

I'm currently working on implementing an autocomplete feature using Google Places API in my project with Material UI React, Redux-Form, Revalidate, and MUI-Places-Autocomplete. Although I've successfully integrated the place lookup functionality, ...

Validation of default values in contact forms

Obtained a free contact form online and hoping it works flawlessly, but struggling with validation for fields like "Full Name" in JS and PHP. Here is the HTML code: <input type="text" name="contactname" id="contactname" class="required" role="inpu ...

Executing Python and JavaScript with Selenium

I am encountering an issue while trying to run this code. The error message indicates that I may be missing a closing ) or using an illegal character. It seems like there might be confusion with inserting arguments where they are not needed. Could someon ...

Steps for accessing the controller scope from a directive nested within another directive:

I am in the process of developing code that is as generic as possible. Currently, I have 2 directives nested within each other, and I want the inner directive to call a method on the main controller's $scope. However, it seems to be requesting the m ...

JQuery GET brings back unnecessary HTML content

Currently utilizing a PHP cart class and implementing some jQuery to dynamically update a div when users add products. The issue I'm encountering is that upon adding a product, the list of products on the HTML page gets duplicated (see screenshot) ev ...

Encountering a RuntimeError during the integration of Angular Js in Rails with ExecJS

Currently, I'm working on integrating Angular Js into a Rails Project and I've been following the tutorial provided at . However, after completing all the steps, I encountered the following error: https://i.sstatic.net/ehYCb.png I've searc ...

Add HTML and JavaScript code dynamically with JavaScript

Currently, I am working on a project that involves an HTML table with some basic JS interactions triggered by user clicks. The structure looks something like this: htmlfile.html ... ... position action ...

When will the javascript file fire if it has this implementation?

Can someone help me make sense of this jquery snippet? (function( window, undefined ) { //All the JQuery code is included here ... })(window); I'm curious, if a .js file is loaded in a page using the <script> tag, at what point does it ...

Filtering Data with MongoDB Queries

In my data filtering form, I have approximately 15 to 20 dropdown fields. These dropdown fields are meant to provide various options for filtering data. As shown in the image below (from the Zoopla App): https://i.sstatic.net/KOBcc.png The image displays ...

Looking to cycle through arrays containing objects using Vue

Within my array list, each group contains different objects. My goal is to iterate through each group and verify if any object in a list meets a specific condition. Although I attempted to achieve this, my current code falls short of iterating through eve ...

Error receiving by React while updating an array with setState() in TypeScript

I am in search of a way to adjust a property of an item within an array by using the updater returned from setState. The function is passed down as props to the child, who then invokes it with their own index to update their status. const attemptToUpdate ...

What are some ways to transfer data between parent and child components in Vue.js?

I have defined two different components: 'permissionTitle':customTitle, 'permissionItem':customItem, When displayed in the main template, they are structured as follows: <permissionTitle content="Brand Management"> ...

retrieving attribute values from JSON objects using JavaScript

I am struggling to extract certain attribute values from a JSON output and use them as input for a function in JavaScript. I need assistance with this task! Below is the JSON data that I want to work with, specifically aiming to extract the filename valu ...

Fb.UI Dialogs now appearing in Popups rather than an iframe (part 2)

Here is a related issue that I came across: With the assistance of OffBySome, I managed to display my FB.ui dialog boxes in an iframe rather than as pop-ups. However, now I am experiencing an issue where the dialog appears but the loading throbber continu ...

Ensure that all form fields are completed and accurate before the Stripe payment modal is displayed

I've encountered an issue where the stripe payment modal appears before my form validation is complete. I am using the jQuery validation plugin for this purpose. I attempted to integrate the Stripe code within the submitHandler function, but it did no ...

Is there a glitch in the console when sorting an array of dates?

I'm puzzled by the fact that the console is displaying a sorted array in both logs. It doesn't make sense to me because it should not be sorted at the first log, right? static reloadAndSortItems() { let array = []; const items = Store. ...

Identifying geometric coordinates within Canvas

Currently, I am adding drag and drop functionality to my HTML5 Canvas application. I have encountered a challenge in determining how to detect if the shape being clicked on is not a rectangle or square. For instance, within my 'mousedown' event h ...

Encountering an error in Angular when trying to add a dynamic component

I have a straightforward test code for implementing dynamic components in Angular 4. @Component({ selector: 'component', template: ` <ul><li #item *ngFor="let number of list">{{number}}</li></ul> <ng-temp ...

The auto-fill feature in typehead.js is not functioning correctly for predictions

Trying to implement an autocomplete field using typehead.js () : $(document).ready(function() { var result; var result = new Bloodhound({ datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.Domain.domain); ...

Distinguish between datalist selection and text input in BootstrapVue Autocomplete

When looking at the code snippet provided below, I'm trying to figure out the appropriate event/method to determine whether the value entered in the input field was manually typed or selected from the <datalist>. SAMPLE CODE: <div> &l ...