在threejs中使用鼠标滚轮更改相机位置.z答案

【问题标题】：Change camera position.z with mouse wheel in threejs在threejs中使用鼠标滚轮更改相机位置.z
【发布时间】：2017-06-13 08:20:51
【问题描述】：

有谁知道如何更改相机的camera.position.z（带鼠标滚轮），并制作滚动效果？

当我尝试使用变量时，它不起作用。

【问题讨论】：

我不确定“并制作滚动效果”是什么意思，但是要更改相机位置并停止页面滚动，您将...添加一个 scroll 事件侦听器到渲染器 dom 元素和在侦听器函数中更改相机位置并调用event.preventDefault() 以防止页面滚动。
我有一个垂直网格，我想将相机移动到 z 轴而不是让浏览器滚动，我有溢出：身体的隐藏
滚动事件的问题是速度随着时间的推移而增加
哦，好的，您希望在页面滚动时更改相机位置？你已经尝试过什么？

标签： camera three.js

【解决方案1】：

示例中的TrackballControls 或OrbitControls 可用于启用缩放（以及旋转和平移）。见例子https://threejs.org/examples/?q=contro#misc_controls_trackball

包含您可以在three.js-master/examples/js/controls/ 下载的包中找到的控件之一：

<script src="three.js-master/examples/js/controls/OrbitControls.js"></script>

并添加到您的代码中

var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.addEventListener( 'change', render );

缩放应该是开箱即用的。

如果您只对缩放感兴趣，可以禁用其他功能。

this.enableKeys = false;
this.enablePan = false;
this.enableRotate = false;

另请参阅OrbitControls 来源以获取更多选项OrbitControls

【讨论】：

我希望鼠标滚轮改变相机的 position.z 并将其用作上下滚动，之后我只想要那个控件，而不是包中包含的所有其余部分

【解决方案2】：

现在我在这里：

const scl=0;

$(window).on('DOMMouseScroll mousewheel', function (e) {


if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {

    while(scl==0) {

        scl+=0.05;
                camera.position.z+=scl;
                //console.log("1."+" "+scl);
    }

} else {

    while(scl==0) {


        scl+=0.05;
                camera.position.z-=scl;
                //console.log("2."+" "+scl);
    }

}
//console.log("3."+" "+scl);;
 scl=0;
});

window.setInterval(function(){
     scl=0;
}, 10);

【讨论】：

你回答了你自己的问题......这是否意味着你解决了你的问题？
不，答案仍然不起作用，但代码不适合评论答案部分，抱歉我没有使用 jfiddle，我没有考虑过。
哎，我不记得我是怎么做到的了，我记得我还有一个问题，答案在这里，如果你想检查github.com/Phaidonas/WaterEffectMouseOverText?files=1