モデルを回転させた後に線を再描画する方法

Question

2DCanvasを使用して3次元モデルの特定の点を指し示す線を持たせたいが、この線は移動した後でもモデルの同じ点を指し続ける必要がある/回転するので、線を再描画しなければならず、最初の位置が再計算されます。

これはコードパッドです：https://codepen.io/anon/pen/vWKQrO私の意図を見ることができます。

<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> 

回転後にどのように線を再描画できますか？

ありがとうございます！

回答：ここで行わ：https://codepen.io/spaboy/pen/OOWvKP

Answer 1

あなたは.setAttribute('line', {start: newStart, end: newEnd})の行を更新することができます。新しいスポットを指すようにnewEndを変更するだけです。モデルが回転した後に新しいスポットが何であるかを判断するには、変換/演算を行う必要があります。

多分THREE.Object3Dをオブジェクト（.setObject3D('point', yourObject3D)）に追加します。次に、オブジェクト3dの位置を、ポイントしたい点に設定します。モデルが回転すると、el.object3D.updateMatrixWorld(); yourObject3D.getWorldPosition();を使用して、ワールド空間で新しい点を取得するのは簡単な方法です。その新しい世界の位置を新しい終点として使用します。