Three.js sprite文本沒有顯示

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(); 
     } 

更新：我可以看到精靈，但它太小了。即使我增加字體大小，它不會在精靈中增加。我怎樣才能增加精靈的大小？

Answer 1

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