カメラのposition.zを3jsのマウスホイールで変更してください

Question

カメラのcamera.position.z（マウスホイール付き）をどのように変更してスクロール効果を作りたいと思いますか？

私は変数を試しても機能しません。

Answer 1

TrackballControlsまたはOrbitControlsの例を使用すると、ズーム（および回転とパン）を有効にすることができます。

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

そして、あなたのコードに追加

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

やズームボックスの外に動作するはずです：例を参照してくださいhttps://threejs.org/examples/?q=contro#misc_controls_trackball

あなたはthree.js-master/examples/js/controls/でダウンロードしたパッケージで見つけることができるコントロールの1つに含めます。

ズームのみに興味がある場合は、他の機能を無効にすることができます。

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

も参照してくださいより多くのオプションOrbitControls

Answer 2

ためOrbitControlsソースは、今私はここにいます：

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