Threejs:在 Div 中渲染场景 - 防止浏览器窗口滚动，改为进行缩放 (OrbitControls.js) [英] Threejs: Rendering scene in Div - Prevent scrolling of browser window, do zoom instead (OrbitControls.js)

问题描述

我在 Three.js 中编写了一个新工具，用于处理 3d 圆柱体 并渲染位于 DIV 中的场景中的柱面值.

I have written a new tool in three.js which deals with a cylinder in 3d and renders the cylinder values in the scene that is located within a 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:

For the navigation I am using 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

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

The problem is, that if I use the mouse to scroll (having the mouse on top of the canvas), the entire browser window scrolls down - instead of the expected zooming.

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

Is there any way I can force the scroll to happen only within the scene / the canvas. In best case when the mouse is on top of the canvas.

我在 stackoverflow 上尝试了一些针对 Javascript 的停止滚动建议，但这些是在普通"DIV 上，而不是用于带画布的 DIV.

I have tried some stop scroll advices for Javascript here on stackoverflow, but these were on "normal" DIVs not for DIVs with canvas.

推荐答案

感谢 WestLangleys 上面指出 TrackBallControls 的评论，我找到了解决方案:

I have found the solution thanks to WestLangleys's comment above who pointed out the TrackBallControls:

打开 OrbitControls.js 并找到行:

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

在下方添加:

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

就是这样！

它现在按预期工作:Zylinder 3D 演示

PS: 这个应该加到原文件里吧?

PS: Maybe this should be added to the original file?

这篇关于Threejs:在 Div 中渲染场景 - 防止浏览器窗口滚动，改为进行缩放 (OrbitControls.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！