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

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

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

Resizing aframe object in the browser

aframe