Newer
Older
HuangJiPC / public / static / three / examples / jsm / webxr / Text2D.js
@zhangdeliang zhangdeliang on 21 Jun 1018 bytes update
  1. import * as THREE from 'three';
  2.  
  3. function createText( message, height ) {
  4.  
  5. const canvas = document.createElement( 'canvas' );
  6. const context = canvas.getContext( '2d' );
  7. let metrics = null;
  8. const textHeight = 100;
  9. context.font = 'normal ' + textHeight + 'px Arial';
  10. metrics = context.measureText( message );
  11. const textWidth = metrics.width;
  12. canvas.width = textWidth;
  13. canvas.height = textHeight;
  14. context.font = 'normal ' + textHeight + 'px Arial';
  15. context.textAlign = 'center';
  16. context.textBaseline = 'middle';
  17. context.fillStyle = '#ffffff';
  18. context.fillText( message, textWidth / 2, textHeight / 2 );
  19.  
  20. const texture = new THREE.Texture( canvas );
  21. texture.needsUpdate = true;
  22.  
  23. const material = new THREE.MeshBasicMaterial( {
  24. color: 0xffffff,
  25. side: THREE.DoubleSide,
  26. map: texture,
  27. transparent: true,
  28. } );
  29. const geometry = new THREE.PlaneGeometry(
  30. ( height * textWidth ) / textHeight,
  31. height
  32. );
  33. const plane = new THREE.Mesh( geometry, material );
  34. return plane;
  35.  
  36. }
  37.  
  38. export { createText };