为什么三个 js 精灵上的新行字符 '\n' 不起作用?

时间:2021-05-14 17:24:57

标签: three.js sprite css-sprites ccsprite

我正在尝试在一个看起来像这样的精灵中编写文本:

姓名blabla

温度30ºC

频率30 Hz

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

但是“\n”不起作用,有人知道该怎么做吗?下面是对应的代码片段:

            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'

结果如下:

enter image description here

我提前感谢任何帮助! 最好的问候!

0 个答案:

没有答案