用鼠標滾輪改變相機position.z在threejs

Question

有沒有人有任何想法如何更改相機的camera.position.z（與鼠標滾輪），並使滾動效果？

當我嘗試使用變量時，它不起作用。

Answer 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

Answer 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);