Question

我希望有一条线指向带有2DCanvas的3d模型的某些特定点，但是这条线应该继续指向模型的相同点，即使在移动/旋转它之后，所以必须重新绘制线条，并重新计算初始位置。

这是一个codepen：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();可以轻松地在世界空间中获取新点。使用新的世界位置作为新的终点。

如何在旋转模型后重新绘制线条

1 个答案: