在threejs中使用鼠标滚轮更改相机position.z [英] Change camera position.z with mouse wheel in threejs

问题描述

有人知道如何更改相机的 camera.position.z （使用鼠标滚轮）并产生滚动效果吗？

Has anyone any idea how to change the camera.position.z (with mouse wheel) of the camera, and make a scroll effect?

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

When I try with a variable it does not work.

推荐答案

TrackballControls 或 OrbitControls 启用缩放（以及旋转和平移）。请参阅示例 https://threejs.org/examples/?q=contro#misc_controls_trackball

TrackballControls or OrbitControls from examples can be used enable zoom (and rotate and pan). See example https://threejs.org/examples/?q=contro#misc_controls_trackball

包括您可以在下载的软件包中找到的控件之一，该控件位于 three.js-master / examples / js / controls / ：

Include one of the controls that you can find in downloaded package in 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 );

并且缩放应该开箱即用。

And zooming should work out of the box.

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

If you are only interested in zooming other features can be disabled.

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

另请参见 OrbitControls 源< a href = https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js rel = nofollow noreferrer> OrbitControls

这篇关于在threejs中使用鼠标滚轮更改相机position.z的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！