在一帧标记上缩放 3d 模型

Question

我正在使用框架在标记上加载 3d 模型。我想知道如何对 3d 模型进行动态缩放，例如当 3d 模型出现在标记上时我如何 放大和缩小 3d 模型。请帮我解决这个问题。

Answer 1

您可以通过设置 scale 属性来放大/缩小 3d 模型。将您的模型纳入参考 let model = document.querySelector("#model"):

 model.setAttribute("scale", "2 2 2")

会放大的。

 model.setAttribute("scale", "0.5 0.5 0.5")

会变小。

您可以将其与鼠标滚动或任何其他具有 addEventListener 的事件相关联，并根据读数更改比例。

鼠标滚轮示例：

window.addEventListener("wheel", (e) => {
    let scaleFactor = e.deltaY > 0 ? 0.9 : 1.1  //check if we scroll up, or down
    let scale = this.el.getAttribute("scale").clone() // clone the scale vector
    scale.multiplyScalar(scaleFactor)                 
    this.el.setAttribute("scale", scale)              // apply new scale
  })

直播fiddlehere.

在一帧标记上缩放 3d 模型

Scaling of 3d model on marker in a-frame

marker

three.js

aframe