New line ('\n') not working

Questions
,
1

Hello everyone. I am trying to write text in a sprite that would look something like:

Name: blabla
Temperature: 30ºC
Frequency: 30 Hz

let message = cylinder.sensorData.sensorName + '\nTemperature: ' + cylinder.sensorData.motorTemperature + 'ºC\nfundamental Frequency: ' + cylinder.sensorData.fundamentalFrequency + ' Hz'

But the ‘\n’ doesn’t work, does anyone know what to do? Below is the corresponding code snippet:

            const geometry = new THREE.CylinderBufferGeometry(radiusTop, radiusBottom, height, radialSegments);
            const material = new THREE.MeshPhongMaterial({

                color: await colorInHSL(randomColor())

            });

            const cylinder = new THREE.Mesh(geometry, material);

            camera.getWorldDirection(camPosition);

            const quaternion = new THREE.Quaternion();

            quaternion.setFromAxisAngle(camPosition.x, camPosition.y, camPosition.z, Math.PI / 2);

            cylinder.translateOnAxis(cylinder.worldToLocal(camera.position), 0.5);

            cylinder.castShadow = true;

            cylinder.receiveShadow = true;

            cylinder.name = 'cylinder';

            cylinder.canvas2d = document.createElement('canvas');

            cylinder.texture = new THREE.Texture(cylinder.canvas2d)

            cylinder.texture.needsUpdate = true;

            cylinder.spriteMaterial = new THREE.SpriteMaterial({ map: cylinder.texture });

            cylinder.context = cylinder.canvas2d.getContext('2d');

            $.getJSON('https://mfm-develop.wnology.io/3js/simulated-data').then(function (result) {

                Object.defineProperty(cylinder, 'sensorData', {

                    value: result

                })

                let message = cylinder.sensorData.sensorName + '\nTemperature: ' + cylinder.sensorData.motorTemperature + 'ºC\nfundamental Frequency: ' + cylinder.sensorData.fundamentalFrequency + ' Hz'

The result looks like this:

image

I appreciate any help in advance!
Best regards!

2

Seems this is a pure Canvas 2D issue. Does this thread answer your question?

1 Like
3

/cc

1 Like
4

I appreciate your help. Yes, that answered my question.
Thank you so much, best regards from Brazil!

1 Like