Can’t display the content text on the block

Questions
, , ,
1

Hi,
I’m trying to create nested blocks containing images and texts by using three.js and three-mesh-ui, the problem here is that I can’t display the content text on the block
I tried a lot but it didn’t work.

text-not-found
text-not-found1062×658 153 KB 

import * as THREE from "three";
import * as ThreeMeshUI from "three-mesh-ui";

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;

let scene, renderer, controls;

window.addEventListener("load", init);
window.addEventListener("resize", onWindowResize);

const  camera = new THREE.PerspectiveCamera(60, WIDTH / HEIGHT, 0.1, 100);

function init() {
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x505050);


    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(WIDTH, HEIGHT);

    document.body.appendChild(renderer.domElement);

    controls = new OrbitControls(camera, renderer.domElement);
    camera.position.set(0, 1.6, 0);
    controls.target = new THREE.Vector3(0, 1, -1.8);
    controls.update();

    makeTextPanel();

    renderer.setAnimationLoop(loop);
}



function makeTextPanel() {
    const container = new ThreeMeshUI.Block({
        ref: "container",
        padding: 0.020,
        // fontFamily:"./roboto.json",
        fontColor: new THREE.Color(0xffffff),
        backgroundOpacity: 0,
    });

    container.position.set(0, 1, -1.8);
    container.rotation.x = -0.30;
    scene.add(container);

    //

    const title = new ThreeMeshUI.Block({
        height: 0.2,
        width: 1.6,
        margin: 0.025,
        justifyContent: "center",
        fontSize: 0.09,
    });

    title.add(
        new ThreeMeshUI.Text({
            content: "Hello",
            fontColor: new THREE.Color("red"),
        })
    );

    container.add(title);


    const leftSubBlock = new ThreeMeshUI.Block({
        height: 0.95,
        width: 1.0,
        margin: 0,
        padding: 0,
        textAlign: "center",
        justifyContent: "center",
    });


    const rightSubBlock = new ThreeMeshUI.Block({
        margin: 0.015,
        width: 0.6,
        height: 0.95,
    });

    const subSubBlock1 = new ThreeMeshUI.Block({
        height: 0.35,
        width: 0.9,
        margin: 0.025,
        padding: 0.02,
        fontSize: 0.04,
        justifyContent: "center",
        // backgroundOpacity: 0,
    }).add(
        new ThreeMeshUI.Text({
            content: "Known for its extremely keeled dorsal scales that give it a ",
        }),

        new ThreeMeshUI.Text({
            content: "bristly",
            fontColor: new THREE.Color(0x92e66c),
        }),

        new ThreeMeshUI.Text({
            content: " appearance.",
        })
    );

    const subSubBlock2 = new ThreeMeshUI.Block({
        height: 0.53,
        width: 0.5,
        margin: 0.01,
        padding: 0.02,
        fontSize: 0.025,
        alignItems: "center",
        textAlign: 'justify',
        backgroundOpacity: 0,
    }).add(
        new ThreeMeshUI.Text({
            content:
                "The males of this species grow to maximum total length of 73 cm (29 in): body 58 cm (23 in), tail 15 cm (5.9 in). Females grow to a maximum total length of 58 cm (23 in). The males are surprisingly long and slender compared to the females.\nThe head has a short snout, more so in males than in females.\nThe eyes are large and surrounded by 9–16 circumorbital scales. The orbits (eyes) are separated by 7–9 scales.",
                fontColor: new THREE.Color(0xffffff)
        })
    );

    leftSubBlock.add(subSubBlock1, subSubBlock2);

    //

    const contentContainer = new ThreeMeshUI.Block({
        contentDirection: "row",
        padding: 0.02,
        margin: 0.025,
        backgroundOpacity: 0,
    });

    contentContainer.add(leftSubBlock, rightSubBlock);
    container.add(contentContainer);

    camera.lookAt(container.position)
    //

    new THREE.TextureLoader().load("./img.jpg", (texture) => {
        rightSubBlock.set({
            backgroundTexture: texture,
        });
    });
}

//

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}


function loop() {
    ThreeMeshUI.update();
    controls.update();
    renderer.render(scene, camera);
}