three.js - Threejs : Rendering scene in Div - Prevent scrolling of browser window, 改为缩放 (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

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

有什么方法可以强制滚动仅在场景/ Canvas 内发生。最好的情况是鼠标位于 Canvas 顶部。

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:也许这应该添加到原始文件中？