在浏览器中调整框架对象的大小

Question

我正在使用 A-Frame 在 360 度视频中添加一些形状（圆形或矩形），我可以拖动形状以更改其在视频帧中的位置，但我还需要能够调整这些形状的大小以覆盖视频中的精确对象，假设我想用矩形覆盖视频帧中的绘画，所以我希望能够在网络浏览器模式下调整形状以正确覆盖绘画。我发现这个post 询问有关旋转对象的问题，他说他成功地进行了调整大小而没有解释他是如何做到的。有人知道怎么做吗？

Answer 1

您可以使用a-frame API 重新缩放元素：

element.setAttribute("scale", "1 1 1") // replace 1 1 1 with new values

或通过访问底层的THREE.js API：

element.object3D.scale.multiplyScalar(scaleFactor);

---

您可以轻松创建一个组件，该组件将重新调整“选定”元素的大小。运行 snipper，将鼠标悬停在一个元素上并使用滚轮：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  // register component
  AFRAME.registerComponent("foo", {
    // init callback
    init: function() {
      // react to press / release events to know if the element is selected
      this.el.addEventListener("mousedown", e => {
        this.selected = true;
      })
      this.el.addEventListener("mouseup", e => {
        this.selected = false;
      })
      // if this is selected, scale up/down when the mouse is scrolled
      this.el.sceneEl.addEventListener("mousewheel", evt => {
        if (!this.selected) return; // ignore when not selected
        const scale_factor = evt.deltaY < 0 ? 1.1 : 0.9 // scale up or down depending on the scroll direction
        this.el.object3D.scale.multiplyScalar(scale_factor);
        evt.preventDefault();
      })
    }
  })

</script>
<a-scene cursor="rayOrigin: mouse" raycaster="objects: .interactable">
  <a-box class="interactable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
  <a-sphere class="interactable" position="0 1.25 -5" radius="1.25" color="#EF2D5E" foo></a-sphere>
  <a-cylinder class="interactable" position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" foo></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>

如果您正在寻找现成的解决方案，我建议您查看transform controls

---

如果您想通过移动顶点来调整平面大小以制作自定义多边形，您可以直接更改平面顶点位置：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // grab the threejs mesh
      const mesh = this.el.getObject3D("mesh");
      // grab the vertices array
      // the array is looking like this: x1, y1, z1, x2, y2, z2, ... xn, yn, zn
      const vertices = mesh.geometry.attributes.position.array;
            
      // manipulate the vertices in fixed intervals 
      setInterval(evt => {
        vertices[0] = vertices[0] === -0.5 ? -1 : -0.5; // primitive x1 toggle
        mesh.geometry.attributes.position.needsUpdate = true; // toggle update flag
      }, 500);
      setInterval(evt => {
        vertices[1] = vertices[1] === 0.5 ? 1 : 0.5; // primitive y1 toggle
        mesh.geometry.attributes.position.needsUpdate = true; // toggle update flag
      }, 250);
    }
  })
</script>
<a-scene>
  <a-plane position="0 1.6 -2" color="green" foo></a-plane>
</a-scene>

Here is an example of moving the vertex around