Threejs文本不呈现

Question

Sorry, noob question here but I'm stuck for a while on this. 抱歉，noob问题在这里，但我对此停留了一段时间。 I'm trying to get basic Threejs text to render. 我正在尝试获取基本的Threejs文本进行渲染。 Other questions asking this on StackOverflow seem to be using older Threejs APIs. 在StackOverflow上询问的其他问题似乎正在使用较旧的Threejs API。 The following only shows a black screen. 以下仅显示黑屏。 Thanks in advance... 提前致谢...

<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

There's possible 2 issues. 可能有2个问题。

You mentioned a warning WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported . 您提到了警告WARNING: 0:1: extension 'GL_ARB_gpu_shader5' is not supported 。 That looks like it might be a bug in Firefox and Safari . 看来这可能是Firefox和Safari中的错误。

Otherwise your text is huge and your camera is too close. 否则，您的文字会很大，并且相机太近。

Use 采用

camera.position.z = 500;

Threejs文本不呈现

问题描述

1 个解决方案

解决方案1
0 2017-04-23 05:03:26

Threejs文本不呈现

问题描述

1 个解决方案

解决方案1 0 2017-04-23 05:03:26

解决方案1
0 2017-04-23 05:03:26