使用滑块更新 THREE.Mesh.position onchange 事件

Question

大家好，我正在使用（Three.js 库）进行网格翻译。我使用 HTML 滑块来更新值，因此可以使用 JavaScript.

进行更改

我的例子：

这很好用，但我不知道滑块的事件侦听器发生了什么。基本上发生的事情是函数在 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);
}

---

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

Q1：请问有什么方法可以解决上面的问题吗？

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

Answer 1

1. 使用 oninput 事件侦听器而不是 onchange。
2. 使用.lookAt()方法使立方体朝向原点。