I am considering two different HTML structures for my project:
<div id="threeJSContainer">
</div>
<div id="UIControls">
<div ng-include src="'scripts/angular/UI.html'"></div>
</div>
When using the first code structure, I can insert a rich text editor inside the UIControls div and it functions correctly. However, because the UIControls are positioned absolute on top of the full screen consuming threeJSContainer, mouse events intended for the threejs 3d scene end up being fired on the UIControls div.
<div id="threeJSContainer">
<div id="UIControls">
<div ng-include src="'scripts/angular/UI.html'"></div>
</div>
</div>
The second code structure resolves the issue with mouse events by allowing them to be triggered appropriately in the threejs scene. However, because the UIControls are now a sub div inside the threeJScontainer, the rich text editor plugin textAngular does not function as expected. Typing works fine, but other mouse events do not work except for selecting the rich text editor box for typing.