How to re-draw a line after rotating the model - aframe

Question

I want to have a line that points to some specific points of a 3d Model with a 2DCanvas, but this line should continue pointing to the same point of the model even after moving/rotating it, so the line has to be redrawn, and the initial position re-calculated.
This is a codepen : https://codepen.io/anon/pen/vWKQrO where you can see my intention.
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-html-shader#0.2.0/dist/aframe-html-shader.min.js"></script>
</head>
<script src="https://unpkg.com/aframe-line-component/dist/aframe-line-component.min.js"></script>
</head>
<script type="text/javascript">
AFRAME.registerComponent('drag-rotate-component',{
schema : { speed : {default:1}},
init : function(){
this.ifMouseDown = false;
this.x_cord = 0;
this.y_cord = 0;
document.addEventListener('mousedown',this.OnDocumentMouseDown.bind(this));
document.addEventListener('mouseup',this.OnDocumentMouseUp.bind(this));
document.addEventListener('mousemove',this.OnDocumentMouseMove.bind(this));
},
OnDocumentMouseDown : function(event){
this.ifMouseDown = true;
this.x_cord = event.clientX;
this.y_cord = event.clientY;
},
OnDocumentMouseUp : function(){
this.ifMouseDown = false;
},
OnDocumentMouseMove : function(event)
{
if(this.ifMouseDown)
{
var temp_x = event.clientX-this.x_cord;
var temp_y = event.clientY-this.y_cord;
if(Math.abs(temp_y)<Math.abs(temp_x))
{
this.el.object3D.rotateY(temp_x*this.data.speed/1000);
}
else
{
this.el.object3D.rotateX(temp_y*this.data.speed/1000);
}
this.x_cord = event.clientX;
this.y_cord = event.clientY;
}
}
});
</script>
<a-scene vr-mode-ui="enabled: true">
<a-assets>
<a-asset-item id="brainstem" src="https://cdn.aframe.io/test-models/models/brainstem/BrainStem.gltf"></a-asset-item>
</a-assets>
<a-entity gltf-model="#brainstem" position="0 0 -5" scale="3 3 3" drag-rotate-component >
</a-entity>
<a-entity line geometry="primitive: plane" material="shader: html; target: #boxHTML" position="3 5 -5"></a-entity>
<a-entity position="0 -0.5 2">
<a-camera look-controls="enabled:false"></a-camera>
</a-entity>
<!--<a-obj-model scale="0.01 0.01 0.01" src="#crate-obj" mtl="#crate-mtl"></a-obj-model>-->
<a-entity line="start: 3 5 -5; end: 0.5 2 -5; color: #000000"></a-entity>
<a-sky color="#FAFAFA"></a-sky>
<!-- HTML to render as a material. -->
<div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden">
<div id="boxHTML" style="background-image: url(bad.png); color: white; width: 240px; height: 250px; font-size: 64px; font-family: monospace; text-align: center">
<p style="background: rgb(30, 30, 30); position: absolute; top: 25px; width: 250px">Hello</p>
</div>
</div>
</a-scene>
How could i re-draw the line after rotating?
Thanks!
Answer : Done here : https://codepen.io/spaboy/pen/OOWvKP

Answer 1

You can update the line with .setAttribute('line', {start: newStart, end: newEnd}). Just change the newEnd to point to the new spot. You need to do some transform/math to determine what that new spot is after the model has rotated.
Perhaps I would add an THREE.Object3D to the object (.setObject3D('point', yourObject3D)). Then set the object 3d's position to the point that you want to point at. Then when the model rotates, it's an easy way to get the new point in world space using el.object3D.updateMatrixWorld(); yourObject3D.getWorldPosition();. Use that new world position as the new end point.