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

我在three.js中编写了一个新工具，该工具处理一个分区，并在位于分区内的场景中渲染圆柱体值

JS:

HTML:

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

是否有任何方法可以强制滚动仅在场景/画布中发生。在最佳情况下，鼠标位于画布顶部

---

我在stackoverflow上尝试了一些Javascript停止滚动的建议，但这些建议是在“普通”div上，而不是在canvas上。我找到了解决方案，这要感谢Westlangley在上面的评论，他指出了轨迹球控件：

打开

OrbitControls.js

并查找行：

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

在右下方添加：

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

就是这样

它现在可以正常工作了：

---

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

问题是否会随着

轨迹球控件的出现而消失？
var controls=new THREE.轨迹球控件（摄像头）解决了滚动问题。但是trackback控件的鼠标导航很奇怪，感觉很不自然和困难，所以我需要坚持使用轨道控件。我已相应地更新了上述问题。或者还有其他类似于OrbitControl的控件吗@韦斯特兰利离题题：你有666个答案；）我没有使用r68，因为Firefox 31抛出了一个我不知道是否会导致问题的错误。我曾尝试只更新并坚持使用r65，但这抛出了一个错误：
TypeError:（中间值）。setFromUnitVectors不是一个函数，这在Firefox中仍然发生，尽管很轻微。在放大/缩小动画接近尾声时，用鼠标滚轮向任一方向滚动时，这一点最为明显。然而，它不会发生在chrome中。我正在使用Firefox38，最新版本的orbitControls.js.firefox仍在滚动页面（v41.0.1）。我修复了将事件侦听器从
DOMMouseScroll
更改为
MozMousePixelScroll
：
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

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

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