将文本添加到三个js模式框中

Question

我有一个onClick功能，可以在一个盒子顶部添加一个3D模态。 我想在此框中添加文字：

但我无法让它发挥作用：

function onClick(object) {
            if (uiPlane !== undefined) {
                scene.remove(uiPlane);
                scene.remove(t)
                uiPlane = undefined;
            } else {
                var geometry = new THREE.PlaneGeometry(6, 2, 1);
                var material = new THREE.MeshBasicMaterial( {
                    color: new THREE.Color("rgb(242, 242, 242)"),
                    side: THREE.DoubleSide
                });

                uiPlane = new THREE.Mesh(geometry, material);
                uiPlane.name = 'dialog_' + object.name;

                if (object.name === 'Button_7' || object.name === 'Button_12') {




                    uiPlane.position.x = object.position.x - 3.75;
                    uiPlane.position.y = object.position.y;
                    uiPlane.position.z = object.position.z;
                    t=createText("Hello world!Hello world!Hello world!Hello world!",uiPlane.position.x,uiPlane.position.y,uiPlane.position.z,"left","16px Arial",205,205,'black');

                } else if (object.name === 'Button_6' || object.name === 'Button_8') {




                    uiPlane.position.x = object.position.x + 3.75;
                    uiPlane.position.y = object.position.y;
                    uiPlane.position.z = object.position.z - 0.1;
                    t=createText("Hello world!Hello world!Hello world!Hello world!",uiPlane.position.x,uiPlane.position.y,uiPlane.position.z,"left","16px Arial",205,205,'black');

                } else if (object.name === 'Button_11') {




                    uiPlane.position.x = object.position.x + 0.1;
                    uiPlane.position.y = object.position.y - 0.5;
                    uiPlane.position.z = object.position.z - 3.6;
                    t=createText("Hello world!Hello world!Hello world!Hello world!",uiPlane.position.x,uiPlane.position.y,uiPlane.position.z,"left","16px Arial",205,205,'black');

                    uiPlane.rotateY(89.5);
                } else if (object.name === 'Button_10') {




                    uiPlane.position.x = object.position.x - 0.1;
                    uiPlane.position.y = object.position.y - 0.5;
                    uiPlane.position.z = object.position.z + 3.5;
                    t=createText("Hello world!Hello world!Hello world!Hello world!",uiPlane.position.x,uiPlane.position.y,uiPlane.position.z,"left","16px Arial",205,205,'black');

                    uiPlane.rotateY(-89.5);
                } else if (object.name === 'Button_9') {




                    uiPlane.position.x = object.position.x;
                    uiPlane.position.y = object.position.y - 0.5;
                    uiPlane.position.z = object.position.z + 3.5;
                    t=createText("Hello world!Hello world!Hello world!Hello world!",uiPlane.position.x,uiPlane.position.y,uiPlane.position.z,"left","16px Arial",205,205,'black');

                    uiPlane.rotateY(-89.5);
                } else if (object.name === 'Button_3') {




                    uiPlane.position.x = object.position.x;
                    uiPlane.position.y = object.position.y - 0.5;
                    uiPlane.position.z = object.position.z + 3.5;
                    t=createText("Hello world!Hello world!Hello world!Hello world!",uiPlane.position.x,uiPlane.position.y,uiPlane.position.z,"left","16px Arial",205,205,'black');

                    uiPlane.rotateY(-89.5);
                } else {




                    uiPlane.position.x = object.position.x + 3.75;
                    uiPlane.position.y = object.position.y;
                    uiPlane.position.z = object.position.z + 0.25;
                    t=createText("Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!Hello world!",uiPlane.position.x,uiPlane.position.y,uiPlane.position.z,"left","16px Arial",205,205,'black');
                }
                scene.add(uiPlane);
                scene.add(t);
            }

我希望像uiPlane.text或innerHTML或html之类的东西，或其他任何东西都可以。

编辑：

我找到了一个用文本添加Canvas的函数。什么是正确的选择？

function createText(text, x, y, z, textAlign, font, width, height, color){
            var textHolder = document.createElement( 'canvas' );
            var ctext = textHolder.getContext('2d');
            textHolder.width = width;
            textHolder.height = height;
            ctext.fillStyle = color;
            ctext.font = "500px Arial";
            ctext.textAlign = textAlign;
            ctext.fillText(text, width/2, height);


            var tex = new THREE.Texture(textHolder);
            // tex.needsUpdate = true;

            var mat = new THREE.MeshBasicMaterial( { map: tex, overdraw: false});
            mat.transparent = true;
            mat.map.needsUpdate = true;

            var textBoard = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), mat);
            textBoard.position.x = x-2;
            textBoard.position.y = y+1;
            textBoard.position.z = z;


            return textBoard;
        }