Question

对不起，诺布问题在这里，但我已经坚持了一段时间。我试图让基本的Threejs文本呈现。在StackOverflow上提出此问题的其他问题似乎是使用较旧的Threejs API。以下仅显示黑屏。提前谢谢......

<html>
<head>
    <title>Text Test</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );


        var loader = new THREE.FontLoader();
        var font = loader.load(
            // resource URL
            'helvetiker_bold.typeface.json',
            // Function when resource is loaded
            function ( font ) {
                var geometry = new THREE.TextGeometry( 'Hello three.js!', {
                    font: font,
                    size: 80,
                    height: 5,
                    curveSegments: 12,
                    bevelEnabled: true,
                    bevelThickness: 10,
                    bevelSize: 8,
                    bevelSegments: 5
                } );
                var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
                var textMesh = new THREE.Mesh( geometry, material );

                scene.add( textMesh );

                camera.position.z = 5;

                var render = function () {
                    requestAnimationFrame( render );


                    renderer.render(scene, camera);
                };

                render();
            },
            // Function called when download progresses
            function ( xhr ) {
                console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
            },
            // Function called when download errors
            function ( xhr ) {
                console.log( 'An error happened' );
            }
        );



    </script>
</body>

Answer 1

可能有2个问题。

您提到了警告WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported。这看起来像it might be a bug in Firefox and Safari。

否则你的文字很大而你的相机太近了。

使用

camera.position.z = 500;

Threejs文本没有呈现

1 个答案: