文字

在3D扩展中显示文字也很简单,通过layer的createText方法创建一个文字纹理,然后将它应用到对应的元素上。不过注意的是,显示的宽高比要和文字纹理的宽高比保持一致,以免文字变形。

  1. const {Scene} = spritejs;
  2. const {Plane, shaders} = spritejs.ext3d;
  3. const container = document.getElementById('container');
  4. const scene = new Scene({
  5. container,
  6. displayRatio: 2,
  7. });
  8. const layer = scene.layer3d('fglayer', {
  9. camera: {
  10. fov: 35,
  11. },
  12. });
  13. layer.camera.attributes.pos = [2, 2, 3];
  14. layer.camera.lookAt([0, 1.5, 0]);
  15. const texture = layer.createText('你好 SpriteJS 3D', {
  16. font: '48px Arial',
  17. fillColor: 'red',
  18. });
  19. const program = layer.createProgram({
  20. ...shaders.NORMAL_TEXTURE,
  21. texture,
  22. cullFace: null,
  23. });
  24. const label = new Plane(program, {
  25. width: 1,
  26. height: texture.image.height / texture.image.width,
  27. });
  28. label.animate([
  29. {rotateY: 0},
  30. {rotateY: 360},
  31. ], {
  32. duration: 20000,
  33. iterations: Infinity,
  34. });
  35. layer.append(label);
  36. layer.setOrbit();