Source: lib/sys/ext/htmltex.js

  2. import AssetKeepr from '../../xutils/assetkeepr.js';
  3. import XSys from '../xsys';
  4. import {Visual, Canvas, AssetType} from '../../component/visual.js'
  5. import {Obj3, Obj3Type} from '../../component/obj3.js'
  7. const iffall = ['Visual', 'Canvas', 'Obj3'];
  8. /**Rendering html content as dynamic texture.
  9.  *
  10.  * This system take each entity with one and only one html content, then rendering
  11.  * to multiple THREE.Object3D in scene with help of xv.ecs.sys.Thrender.
  12.  *
  13.  * Htmltex is an extension of ECS.subsystems. User must add it to ECS explicitly.
  14.  * To create a new instance, entities definition must provided as options arg of
  15.  * constructor.
  16.  *
  17.  * These definition can be generated with help of Htmltex.createEntityDefs()
  18.  * For exmaple, see htmltex.case.js
  19.  *
  20.  * @class Htmltex
  21.  */
  22. export default class Htmltex extends XSys {
  23. 	/**
  24. 	 * @param {ECS} ecs
  25. 	 * @param {object} options
  26. 	 * @constructor Htmltex
  27. 	 */
  28. 	constructor(ecs, options) {
  29. 		super(ecs);
  30. 		this.ecs = ecs;
  32. 		// keeping canvas map for update later
  33. 		this.canvas = new Object();
  34. 		var canvEnts = ecs.queryEntities({iffall});
  35. 		for(var e of canvEnts) {
  36. 			this.canvas[e.Canvas.domId] = e.Canvas;
  37. 		}
  38. 	}
  40. 	/**
  41. 	 * @param {int} tick
  42. 	 * @param {Entity[]} entities
  43. 	 * @member Htmltex#refresh
  44. 	 * @function
  45. 	 */
  46. 	update(tick, entities) {
  47. 		for (const e of entities) {
  48. 			var m = e.Obj3.mesh
  49. 			if (e.Canvas.dirty && m) {
  50. 				e.Canvas.dirty = false;
  51. 				e.Canvas.tex.needsUpdate = true;
  52. 				m.material.map = e.Canvas.tex;
  53. 			}
  54. 		}
  55. 	}
  57. 	/**
  58. 	 * Reload a Canvas texture from html, which will be updated atuomatically
  59. 	 * when it's ready.
  60. 	 *
  61. 	 * @param {string} htmlId
  62. 	 * @param {function} onRefresh
  63. 	 * @member Htmltex#refresh
  64. 	 * @function
  65. 	 */
  66. 	refresh(htmlId, onRefresh) {
  67. 		const canv = this.canvas[htmlId];
  68. 		if (!canv) {
  69. 			console.error(`Htmltex.refresh(${htmlId}): component not found.`);
  70. 		}
  71. 		else {
  72. 			AssetKeepr.loadCanvtex(canv, undefined, onRefresh);
  73. 		}
  74. 	}
  76. 	/**
  77. 	 * @param {object} options
  78. 	 * options.objcanvas: array of [{domId, eid, texsize, visual}]<br>
  79. 	 * where<br>
  80. 	 * *objcanvas.domId*: string - canvs id for texture<br>
  81. 	 * *objcanvas.eid*: string - optinal<br>
  82. 	 * *objcanvas.texsize*: {width, height} - optinal, default 256x256<br>
  83. 	 * *objcanvas.visual*: {vtype: AssetType} - optional, default AssetType.DomCanvas<br>
  84. 	 * Other types are not supported.
  85. 	 * @return {array<object>} entity definitions
  86. 	 * @member Htmltex.createEntityDefs
  87. 	 * @function
  88. 	 */
  89. 	static createEntityDefs(options) {
  90. 		var {w, h} = options.plane ?
  91. 			{w: options.plane.w, h: options.plane.h} : {w: 100, h: 100};
  93. 		const entDefines = [];
  94. 		options.objcanvas.forEach(function(def, dx) {
  95. 			if (def.eid === undefined)
  96. 				def.eid = h5uuid();
  98. 			const wh = Object.assign({width: 256, height: 256},
  99. 				def.texsize || def.wh);
  101. 			const obj3 = Object.assign({
  102. 					geom: Obj3Type.PLANE,
  103. 					box: [w, h, 0],       // plane size
  104. 					mesh: undefined },    // Thrender will handle this
  105. 				options.obj3);
  107. 			const vis = Object.assign({vtype: AssetType.DomCanvas },
  108. 				def.visual || def.Visual);
  110. 			var entidef = { id: def.eid,
  111. 							Obj3: obj3,
  112. 							Visual: vis,
  113. 							Canvas: {domId: def.domId,
  114. 									 options: wh,	// buffer texture canvas size
  115. 									},
  116. 						  };
  117. 			entDefines.push(entidef);
  118. 		});
  119. 		return entDefines;
  120. 	}
  121. }
  123. Htmltex.query = { has: iffall };
  125. var myH5uuid = 0;
  126. /**
  127.  * @memberof Htmltex */
  128. function h5uuid() {
  129. 	return `htmltex-${myH5uuid++}`;
  130. }