Threejs:在 Div 中渲染场景 - 防止浏览器窗口滚动,改为缩放 (OrbitControls.js) [英] Threejs: Rendering scene in Div - Prevent scrolling of browser window, do zoom instead (OrbitControls.js)
问题描述
我在 Three.js 中编写了一个新工具,用于处理 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:
对于导航,我使用的是 OrbitControls.js:
var controls = new THREE.OrbitControls(camera, renderer.domElement);//启动时旋转control.rotateLeft(-0.1);control.rotateUp(-0.25);控制.多莉出(2.5);//缩小
问题是,如果我使用鼠标滚动(将鼠标放在画布顶部),整个浏览器窗口都会向下滚动 - 而不是预期的缩放.
有什么办法可以强制滚动只在场景/画布内发生.最好的情况是鼠标位于画布顶部.
我在 stackoverflow 上尝试了一些针对 Javascript 的停止滚动建议,但这些是在普通"DIV 上,而不是用于带画布的 DIV.
感谢 WestLangleys 上面指出 TrackBallControls 的评论,我找到了解决方案:
打开 OrbitControls.js
并找到行:
function onMouseWheel( event ) {if ( scope.enabled === false || scope.noZoom === true ) 返回;
在下方添加:
event.preventDefault();event.stopPropagation();
就是这样!
它现在按预期工作:Zylinder 3D 演示
PS:这个应该加到原文件里吧?
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>
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.
I have tried some stop scroll advices for Javascript here on stackoverflow, but these were on "normal" DIVs not for DIVs with canvas.
I have found the solution thanks to WestLangleys's comment above who pointed out the TrackBallControls:
Open OrbitControls.js
and find lines:
function onMouseWheel( event ) {
if ( scope.enabled === false || scope.noZoom === true ) return;
Add right below:
event.preventDefault();
event.stopPropagation();
This is it!
It works now as expected: Zylinder 3D Demo
PS: Maybe this should be added to the original file?
这篇关于Threejs:在 Div 中渲染场景 - 防止浏览器窗口滚动,改为缩放 (OrbitControls.js)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!