Three.js和HTML滑块

Question

我在混合Three.js和HTML滑块时遇到问题。 滑块正在显示，但无法移动。 当我尝试通过拖动更改值时，什么也没有发生（只有相机移动）。

Three.js容器：

<div id="container"></div>

滑杆：

<div id="zoom"><input id="setZoom" type="range" min="1" max="9000" step="1" value="100" data-orientation="vertical"></div>

Answer 1

正如您说的那样，当您尝试更改滑块的位置时相机正在移动时，我敢于假设您使用THREE.OrbitControls() 。

解决这种情况的方法是在创建控件对象时将renderer.domElement添加为第二个参数，例如：

var controls = new THREE.OrbitControls(camera, renderer.domElement);

jsfiddle示例