'How to place a 2D text over a Three.js scene?

I have a simple 3D scene written in JavaScript inside <script> tag.

I need a text to be placed over that Three.js scene. Here's my code:

<html>
    <head>
        <title>First page.</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link href="/errordocs/style/general.css" rel="stylesheet" type="text/css">            
        <script src="https://threejs.org/build/three.js" crossorigin="anonymous"></script>    
 
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>

    <body>
        <script>
            var scene, camera, renderer;
            var geometry, material, mesh;

            init();

            function init() {                    
                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0x222222 );
                camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 100 );
                camera.position.z = 1;

                geometry = new THREE.SphereGeometry( 0.1, 20, 20 );
                material = new THREE.MeshNormalMaterial();
                mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );
            }
        </script>
    </body>
</html>

Question:

How to place a 2D text over a Three.js scene?

enter image description here

three.js


Solution 1:[1]

I've chosen THREE.TextSprite solution. It's as simple as that:


import TextSprite from '@seregpie/three.text-sprite';

let sprite = new THREE.TextSprite( {
                               text: 'Text must be rendered here...',
                          alignment: 'center'
                         fontFamily: 'Arial, Helvetica, sans-serif',
                           fontSize: 28,
                              color: '#ffffff' } );
 
scene.add( sprite );

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions