Threejs：在Div中渲染场景 - 防止滚动浏览器窗口，改为缩放（OrbitControls.js）

Question

我在three.js中编写了一个新工具，它处理cylinder in 3d并渲染位于DIV内的场景中的柱面值。

JS：

container = document.getElementById('zylinder_3d');
var sceneWidth = document.getElementById('zylinder_3d').offsetWidth;
var sceneHeight = document.getElementById('zylinder_3d').offsetHeight;
renderer.setSize(sceneWidth, sceneHeight);
container.appendChild(renderer.domElement);

HTML：

<div id="zylinder_3d"></div>

对于导航我正在使用OrbitControls.js：

var controls = new THREE.OrbitControls(camera, renderer.domElement);
// rotate at startup
controls.rotateLeft(-0.1);
controls.rotateUp(-0.25);
controls.dollyOut(2.5); // zoom out

问题是，如果我使用鼠标滚动（将鼠标放在画布顶部），整个浏览器窗口会向下滚动 - 而不是预期的缩放。

有什么办法可以强制滚动只在场景/画布中发生。最好的情况是鼠标位于画布顶部。

我已经在stackoverflow上尝试了一些关于Javascript的停止滚动建议，但是这些是“普通”DIV，不适用于带有画布的DIV。

Answer 1

由于WestLangleys上面的评论指出了TrackBallControls，我找到了解决方案：

打开OrbitControls.js并找到以下行：

function onMouseWheel( event ) {
    if ( scope.enabled === false || scope.noZoom === true ) return;

在下面添加：

    event.preventDefault();
    event.stopPropagation();

就是这样！

现在按预期工作：Zylinder 3D Demo

PS：也许这应该添加到原始文件中？