Cannot read properties of undefined (reading 'length')

Questions
1

Hello everyone, there is such a problem. I need to place 3D text around the model. I found this solution, but I get an error
main.js:105 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘length’)

Can’t find vertices.
Please Help who knows how.

My code

var circleRadius = 0.27;
var loader = new FontLoader.FontLoader();
                loader.load('/assets/models/fonts/Arial_Narrow_Regular.json', function (font) {
                    var textGeometry = new TextGeometry.TextGeometry('Your Text', {
                        font: font,
                        size: 0.05,  // Adjust the size as needed
                        height: 0.02,
                        curveSegments: 12,
                        bevelEnabled: false,
                    });

                    console.log(textGeometry.isBufferGeometry);

                    
                        var textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
                        var textMesh = new THREE.Mesh(textGeometry, textMaterial);
            
                        // Position the text along the circle
                        var angleStep = (Math.PI * 2) / textGeometry.vertices.length;
            
                        for (var i = 0; i < textGeometry.vertices.length; i++) {
                            var angle = angleStep * i;
                            var x = Math.cos(angle) * circleRadius;
                            var z = Math.sin(angle) * circleRadius;
                            textGeometry.vertices[i].x = x;
                            textGeometry.vertices[i].z = z;
                        }
            
                        // Add text to the model
                        this.model.children[0].children[1].add(textMesh);


                });
2

Your code uses deprecated Geometry - removed in r125 - you would need to iterate through BufferGeometry position attribute in order to retrieve the vertices.

3

Thanks, but how do I do it for this code?
Thanks in advance!

4

Try this?

let vt = textGeometry.attributes.position.array;
                        for (var i = 0; i < vt.length; i+=3) {
                            var angle = angleStep * i;
                            vt[i] = Math.cos(angle) * circleRadius;
                            vt[i+2] = Math.sin(angle) * circleRadius;
                        }
5

But… I don’t think this will do what you want it to anyway…

I think you want to base the rotation off the x position of the vertex… if you’re trying to wrap it around something…

let vt = textGeometry.attributes.position.array;
for (var i = 0; i < vt.length; i+=3) {
var angle = vt[i] * 0.01; //Adjust this

                        vt[i] = Math.cos(angle) * circleRadius;
                        vt[i+2] = Math.sin(angle) * circleRadius;
                    }
6

Thank you for your time manthrax, I tried to do as you advised, but now I don’t see the text at all.

                var modelRadius = 27;
                var loader = new FontLoader.FontLoader();
                loader.load('/assets/models/fonts/Arial_Narrow_Regular.json', function (font) {
                    var textGeometry = new TextGeometry.TextGeometry('Your Text', {
                        font: font,
                        size: 0.05,  // Adjust the size as needed
                        height: 0.02,
                        curveSegments: 12,
                        bevelEnabled: false,
                    });

                    console.log(textGeometry.isBufferGeometry);

                        let vt = textGeometry.attributes.position.array;
                        for (var i = 0; i < vt.length; i+=3) {
                        var angle = vt[i] * 0.01; //Adjust this
                            vt[i] = Math.cos(angle) * modelRadius;
                            vt[i+2] = Math.sin(angle) * modelRadius;
                        }

                        var textMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
                        var textMesh = new THREE.Mesh(textGeometry, textMaterial);

                        // Add text to the model
                        this.model.children[0].children[1].add(textMesh);


                });
7

Thank you for your time manthrax I have such a solution

 var loader = new FontLoader.FontLoader();
                    loader.load('/assets/models/fonts/Arial_Narrow_Regular.json', function (font) {
                    this.textGeometry = new TextGeometry.TextGeometry(values.text_emb_one_side, {
                        font: font,
                        size: 0.02,
                        height: 0.03,
                        curveSegments: 12,
                        bevelEnabled: false,
                    });
                    
                    
                    this.textMaterial = new THREE.MeshBasicMaterial({ 
                        color: 0x000000, 
                    });

                    this.textMesh = new THREE.Mesh(this.textGeometry, this.textMaterial);

                    textMesh.position.set(0, 0, 0);

                    this.model.children[0].children[1].add(this.textMesh);

                    });

The text appears but there is no rounding with the model. How can I bend the tex so that it is around?

image

I need something like this

fd9e841035ffc6e1c800182cc6f4de03

8

Can you use this glitch:

Put your code to reproduce your situation in there… and we can try to work it out?