Question

我试图在三个场景中放一个精灵文字，但它没有显示。我试图显示精灵画布，它在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();
        }

更新：我可以看到精灵，但它太小了。即使我增加了字体大小，它也不会在精灵中出现。如何增加精灵的大小？

Answer 1

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

缩放精灵

没有显示Three.js精灵文字

1 个答案: