如何在 Three.js 场景上放置 2D 文本图层？

Question

如何在 Three.js 场景上放置 2D 文本图层？

我创建了一个用 JavaScript 编写的简单 3D 场景。场景THREE.SphereGeometry用 a 渲染 a THREE.MeshNormalMaterial。我唯一需要的是位于Three.js场景上方的文本层。

Question：如何在渲染的 Three.js 场景上放置 2D 文本？

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mug*_*n87 6

实现预期结果的方法不止一种。

在大多数情况下，使用THREE.CSS2DRenderer作为标签或注释渲染器会给出正确的结果。好处是您可以使用 CSS 轻松设置文本样式。例如，在此示例中使用渲染器：https://thirdjs.org/examples/css2d_label
另一种方法是在画布上渲染文本，然后将其用作THREE.Sprite实例的纹理。使用精灵可以将标签混合或隐藏在其他 3D 对象后面，这不适用于基于 HTML/CSS 的解决方案。
我知道您特别要求 2D 文本，但对于 3D 文本，您可以使用TextGeometry生成网格。

归档时间：	5 年，1 月前
查看次数：	5746 次
最近记录：	2 年，3 月前