Three.js精灵文字不显示

Question

我试图将一个精灵文本放置在three.js场景中，但未显示。 我试图显示精灵画布及其在threejs画布上方的完全可见

我的剧本是

if (!Detector.webgl)
            Detector.addGetWebGLMessage();
        var renderer = new THREE.WebGLRenderer({alpha: false, antialias: true});
        var camera = new THREE.PerspectiveCamera(35, $('#canvas').width() / $('#canvas').height(), 1, 1000);
        var controls = new THREE.OrbitControls(camera, renderer.domElement);
        var scene = new THREE.Scene();
        var ambient = new THREE.AmbientLight(0xffffff, 0.1);
        var spotLight = new THREE.SpotLight(0xffffff, 1);
        init();
        animate();
        function init() {
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            renderer.gammaInput = true;
            renderer.gammaOutput = true;
            camera.position.set(0, 0, 500);
            spotLight.position.set(0, 0, 125);
            spotLight.castShadow = true;
            spotLight.angle = Math.PI / 4;
            spotLight.penumbra = 0.05;
            spotLight.decay = 1;
            spotLight.intensity = 1.8;
            spotLight.distance = 800;
            spotLight.shadow.mapSize.width = 100;
            spotLight.shadow.mapSize.height = 100;
            spotLight.shadow.camera.near = 50;
            spotLight.shadow.camera.far = 50;


            scene.add(camera);

            sprite = makeTextSprite("message", 204);
            sprite.position.set(30, 30, 30);
            scene.add(sprite);
            function makeTextSprite(message, fontsize) {
                var ctx, texture, sprite, spriteMaterial,
                        canvas = document.createElement('canvas');
                ctx = canvas.getContext('2d');
                ctx.font = fontsize + "px Arial";
                // setting canvas width/height before ctx draw, else canvas is empty
                canvas.width = ctx.measureText(message).width;
                canvas.height = fontsize * 6; // fontsize * 1.5
                $('#canvas').append(canvas);
                // after setting the canvas width/height we have to re-set font to apply!?! looks like ctx reset
                ctx.font = fontsize + "px Arial";
                ctx.fillStyle = '#' + (Math.random() * 0xFF0000 << 0).toString(16);
                ctx.fillText(message, 0, fontsize);

                texture = new THREE.Texture(canvas);
                texture.minFilter = THREE.LinearFilter; // NearestFilter;
                texture.needsUpdate = true;
                spriteMaterial = new THREE.SpriteMaterial({map: texture});
                sprite = new THREE.Sprite(spriteMaterial);
                return sprite;
            }
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            renderer.shadowMapCullFrontFaces = false;
            renderer.setSize($('#canvas').width(), $('#canvas').height());
            scene.add(spotLight);
            scene.add(ambient);

            cube1 = new THREE.Mesh(
                    new THREE.BoxGeometry(20, 20, 20),
                    new THREE.MeshBasicMaterial({
                        color: 0xff0faf,
                        transparent: false,
                        opacity: 1,
                        overdraw: 0.5
                    }));

            scene.add(cube1);

            controls.addEventListener('change', render);
            controls.minDistance = 20;
            controls.maxDistance = 700;
            controls.maxPolarAngle = Math.PI / 2;
            controls.enablePan = false;
            controls.update();
            $('#canvas').append(renderer.domElement);
        }
        function render() {
            renderer.render(scene, camera);
        }
        function animate() {

            requestAnimationFrame(animate);
            render();
            controls.update();
        }

更新：我可以看到精灵，但是它太小了。 即使我增加了fontsize，它在sprite中也不增加。 如何增加精灵的大小？

Answer 1

您可以使用sprite.scale.set(x, y, z);缩放精灵sprite.scale.set(x, y, z);