如何使用鼠标滚轮缩放 three.js 场景？答案

【问题标题】：How to zoom a three.js scene with the mouse wheel?如何使用鼠标滚轮缩放 three.js 场景？
【发布时间】：2020-09-07 23:07:16
【问题描述】：

我有一个简单的three.js 图形，我尝试使用this 和this 问题中的答案来使创建的绘图可以通过鼠标滚轮缩放。通过使用鼠标滚轮，我想放大或缩小图形。

这里是完整的代码：pastebin link

但是，当转动鼠标滚轮时没有任何反应，并且我没有收到错误消息。也许我错过了什么？

【问题讨论】：

你可以做一个fiddle的权利。 (D) 不粘贴
只是出于好奇，您为什么不想使用THREE.OrbitControls()？查看this example 及其源代码。（缩放在controls.enableZoom = false; 行处被禁用）
并且没有为mousewheel添加事件

标签： javascript three.js

【解决方案1】：

演示

var container, camera, scene, renderer, colors;
var selected = 0;
var selectedObject;
var objects = [];

// DOM element...
container = document.createElement('div');
document.body.appendChild(container);

// Camera...
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(0, 0, 150);

// Scene...
scene = new THREE.Scene();
scene.add(camera);

// Renderer...
renderer = new THREE.WebGLRenderer({
    clearAlpha: 1
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

// Scatter plot...
scatterPlot = new THREE.Object3D();
scene.add(scatterPlot);

// Plot some random points...
circle = new THREE.CircleGeometry(1, 20);


colors = [];
var max = 50;
var min = -50;

for (var i = 0; i < 10; i++) {         

    var object = new THREE.Mesh( circle.clone(), new THREE.MeshBasicMaterial( { color: new THREE.Color('black'), opacity: 0.5 } ) );
    object.position.x = Math.random() * (max - min) + min;
    object.position.y = Math.random() * (max - min) + min;
    object.position.z = 0;                 

    scene.add( object );
    objects.push( object );

}

animate();

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

raycaster = new THREE.Raycaster();
mouse = new THREE.Vector2();
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

function onDocumentMouseDown( event ) {
    event.preventDefault();
    mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
    raycaster.setFromCamera( mouse, camera );
    var intersects = raycaster.intersectObjects( objects );
    if ( intersects.length > 0 ) {
        //intersects[ 0 ].object.material.color.set('red');
        //intersects[ 0 ].object.geometry.scale(1.1,1.1,1.1);
        if (selected === 0) {
            selected = 1;
            selectedObject = intersects[ 0 ].object;
            selectedObject.material.color.set('red');
            console.log(selectedObject.position.x);
        } else {
            selected = 0;
            var geometry = new THREE.Geometry();
            geometry.vertices.push(intersects[ 0 ].object.position);
            geometry.vertices.push(selectedObject.position);
            var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0x0000ff }));
            scene.add(line);

            selectedObject.material.color.set('black');
        }

    }
}

function onWindowResize() {        
    camera.left = window.innerWidth / - 2;
    camera.right = window.innerWidth / 2;
    camera.top = window.innerHeight / 2;
    camera.bottom = window.innerHeight / - 2;
    camera.aspect = window.innerWidth / window.innerHeight;        

    renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseWheel( event ) {

    var fovMAX = 160;
    var fovMIN = 1;

    camera.fov -= event.wheelDeltaY * 0.05;
    camera.fov = Math.max( Math.min( camera.fov, fovMAX ), fovMIN );
    camera.projectionMatrix = new THREE.Matrix4().makePerspective(camera.fov, window.innerWidth / window.innerHeight, camera.near, camera.far);

}

body { margin: 0; }
canvas { width: 100%; height: 100% }

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/54/three.js"&gt;&lt;/script&gt;

在你的代码中添加事件监听器

document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

【讨论】：

【解决方案2】：

document.addEventListener( 'mousewheel', (event) => {
    camera.position.z +=event.deltaY/500;
});

【讨论】：

虽然您的代码答案可能是正确的，但在此基础上提供解释会更好，以便其他人可以将其放入他们的代码中或学习如何自己做。例如，解释 OP 需要将他的代码绑定到一个事件中以使其发生已经更好了。

【解决方案3】：

仅在 Webkit 浏览器中支持 mousewheel 事件。
对于跨浏览器的兼容性，请使用wheel 事件。

【讨论】：