Utilizing For Loop to Integrate TextGeometry in THREE.js

Question

Utilizing For Loop to Integrate TextGeometry in THREE.js

Attempting to construct numbers along a 3D grid using THREE.TextGeometry()

However, only one number is being generated. How can I fix this issue?

The "current" variable ranges from -10 to 10, excluding 0. My IDE (PyCharm) is indicating that the "Mutable Variable is accessible from closure"

I'm unsure of what mistake I am making and how to resolve it. Thank you

function createGridNumbersX(size){

var grpGridNumbersX = new THREE.Group();
grpGridNumbersX.name = 'grpGridNrsX' ;

var loader = new THREE.FontLoader();
var fontType = 'fonts/helvetiker_regular.typeface.json';
var textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff});

for (i=0; i<(size*2)+1; i++) {

    var counter = i + 1;
    var start = -size - 1;
    var current = start + counter;

    if (i === size) {
        continue
    }

    console.log('current ' + current);

    loader.load(fontType, function (font, ) {

        var textGeometry = new THREE.TextGeometry(**current**, {
            font: font,
            size: 0.3,
            height: false,
        });

        var mesh = new THREE.Mesh(textGeometry, textMaterial);
        mesh.name = 'xNr' + i;
        mesh.position.x = current;

        grpGridNumbersX.add(mesh);

    });
}

scene.add(grpGridNumbersX);

} createGridNumbersX(10);

javascript for-loop three.js

Answer 1

Answer №1

It's probable that you'll have to wait for the font to load just once.

var grpGridNumbersX = new THREE.Group();
grpGridNumbersX.name = 'grpGridNrsX' ;

var loader = new THREE.FontLoader();
var fontType = 'fonts/helvetiker_regular.typeface.json';
var textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff});
loader.load(fontType, createText);

function createText(font) {
    for (let i=0; i<(size*2)+1; i++) {

        var counter = i + 1;
        var start = -size - 1;
        var current = start + counter;

        if (i === size) {
            continue
        }

        console.log('current ' + current);

            var textGeometry = new THREE.TextGeometry(**current**, {
                font: font,
                size: 0.3,
                height: false,
            });

            var mesh = new THREE.Mesh(textGeometry, textMaterial);
            mesh.name = 'xNr' + i;
            mesh.position.x = current;

            grpGridNumbersX.add(mesh);
    }

    scene.add(grpGridNumbersX);

}

You may discover this answer helpful. It also generates one mesh per letter, arranging them into a ring instead of a grid.

Answer 2

It's probable that you'll have to wait for the font to load just once.

var grpGridNumbersX = new THREE.Group();
grpGridNumbersX.name = 'grpGridNrsX' ;

var loader = new THREE.FontLoader();
var fontType = 'fonts/helvetiker_regular.typeface.json';
var textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff});
loader.load(fontType, createText);

function createText(font) {
    for (let i=0; i<(size*2)+1; i++) {

        var counter = i + 1;
        var start = -size - 1;
        var current = start + counter;

        if (i === size) {
            continue
        }

        console.log('current ' + current);

            var textGeometry = new THREE.TextGeometry(**current**, {
                font: font,
                size: 0.3,
                height: false,
            });

            var mesh = new THREE.Mesh(textGeometry, textMaterial);
            mesh.name = 'xNr' + i;
            mesh.position.x = current;

            grpGridNumbersX.add(mesh);
    }

    scene.add(grpGridNumbersX);

}

You may discover this answer helpful. It also generates one mesh per letter, arranging them into a ring instead of a grid.

Answer 3

Answer №2

The Resolution: * Implement the "For Loop inside the Loader.load" * Change the "current variable to a string"

Still figuring out how to align each number with the camera, it works correctly when I first load the scene, but the lookat functionality doesn't update when I move the camera

function generateGridNumbersX(size) {

var gridNumsX = new THREE.Group();
gridNumsX.name = 'grpGridNrsX';

var loader = new THREE.FontLoader();
var fontType = 'fonts/helvetiker_regular.typeface.json';
var textMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});

loader.load( fontType, function (font) {

    for (i=0; i<(size*2)+1; i++) {

        var count = i + 1;
        var startVal = -size - 1;
        var currentVal = startVal + count;

        if (i === size) {
            continue
        }

        var strVal = currentVal.toString();

        var textGeometry = new THREE.TextGeometry(strVal, {
            font: font,

            size: 0.2,
            height: false,
        });

        var txtMesh = new THREE.Mesh(textGeometry, textMaterial);
        txtMesh.position.x = currentVal;
        txtMesh.name = 'xAxeNr' + i;
        txtMesh.lookAt(camera.position);


        gridNumsX.add(txtMesh);
    }
});


scene.add(gridNumsX);

} generateGridNumbersX(10);

Answer 4

The Resolution: * Implement the "For Loop inside the Loader.load" * Change the "current variable to a string"

Still figuring out how to align each number with the camera, it works correctly when I first load the scene, but the lookat functionality doesn't update when I move the camera

function generateGridNumbersX(size) {

var gridNumsX = new THREE.Group();
gridNumsX.name = 'grpGridNrsX';

var loader = new THREE.FontLoader();
var fontType = 'fonts/helvetiker_regular.typeface.json';
var textMaterial = new THREE.MeshBasicMaterial({color: 0xffffff});

loader.load( fontType, function (font) {

    for (i=0; i<(size*2)+1; i++) {

        var count = i + 1;
        var startVal = -size - 1;
        var currentVal = startVal + count;

        if (i === size) {
            continue
        }

        var strVal = currentVal.toString();

        var textGeometry = new THREE.TextGeometry(strVal, {
            font: font,

            size: 0.2,
            height: false,
        });

        var txtMesh = new THREE.Mesh(textGeometry, textMaterial);
        txtMesh.position.x = currentVal;
        txtMesh.name = 'xAxeNr' + i;
        txtMesh.lookAt(camera.position);


        gridNumsX.add(txtMesh);
    }
});


scene.add(gridNumsX);

} generateGridNumbersX(10);

Utilizing For Loop to Integrate TextGeometry in THREE.js

Answer №1

Answer №2

Similar questions

A method for transforming each word in a string to begin with a capital letter

What is the best way to create a table of buttons with seamless integration, leaving no gaps between each button?

The ajax method for loading an xml file results in displaying the undefined message

Customizing the toolbar in MUI Datatable

Error message HMR Webpack was found to be invalid

Do I need to implement server side rendering in Vue or React to secure my REST API?

Integrating a Find Pano functionality into a Kolor Panotour

Creating aesthetically pleasing URLs from data: A simple guide

Should one use Javascript library dependencies with or without bundling?

Is there a way to incorporate both max-width and min-width in a matchMedia query effectively?

Retrieve information from Google Sheets to use in SVG map

Am I going too deep with nesting in JavaScript's Async/Await?

No result returned by IntersectObjects function

Setting up Firebase in an Angular 6 project without using AngularFire

Passing an ID in Next.js without showing it in the URL

Assigning the image source to match the image source from a different website using the image ID

Patiently awaiting the completion of the entire page loading process

Adjust the size of the sliding tool with images of varying dimensions

Having trouble drawing two lines in Highcharts? Is the JSON format invalid?

The datepicker UI triggers the onChangeMonthYear event before executing the beforeShowDay function