javascript - 使用 slider 更新 THREE.Mesh.position onchange 事件

Question

大家好，我正在使用(Three.js 库)进行网格翻译。我使用 HTML slider 来更新值，以便可以使用 JavaScript 进行更改。

我的例子:

这工作正常，但我不知道 slider 的事件监听器发生了什么。基本上发生的事情是该函数在 onchange 属性 中，但它看起来像 onclick 一样工作:

<input type="range" value=n; min=n; max=n; 
    onchange="set_Radius()";
>
input type="range" value=n; min=n; max=n; 
    onchange="set_Theta()";
>

要移动我使用的立方体:

animate() {
   var sphericalPos = new THREE.Spherical(get_Radius(), get_Theta(), 0);  
   cube_Mesh.position.setFromSpherical(sphericalPos);
}

---

问题:只有当我从 slider 上松开鼠标点击时，这才有效。例如，如果我将 slider 半径从 50 移动到 150，它只会更新 50 和 150，而不会更新两者之间的任何数字。

Q1:有什么办法可以解决上面的问题吗？

Q2:是否可以锁定立方体的面方向，使其在任意位置都可以盯着原点(比如类似OrbitController的L_Click Mouse事件)？

Answer 1

1. 使用 oninput 事件监听器代替 onchange。
2. 使用.lookAt()将立方体面向原点的方法。