orbitcontrols.js：ズームイン/ズームアウトする方法

orbitcontrols.js（THREE.jsを使用）を使用して、マウスホイールを回転させるのと同じ効果をコードで達成したい。例えば、camera.zoomIn（）のようなものを呼び出して、目標に向かって設定された距離を移動させたいとします。誰でもこれを行う方法を知っていますか？orbitcontrols.js：ズームイン/ズームアウトする方法

出典

2016-12-17 Len White

~~OrbitalControlsオブジェクトで.dollyIn(dollyScale)と.dollyOut(dollyScale)と呼ぶことができます。~~

編集：これらはパブリックメソッドではありません。 1つはOrbitalControls.jsを編集することによってそれらにアクセスできます。

THREE.OrbitControlsの機能にthis.dIn = dollyIn;を追加しました。外からcontrols.dIn(1.05); controls.update();を呼び出してズームインできます。

出典

2016-12-17 12:47:20

おかげでクリス、あなたはこのするvarコントロール=新しいTHREE.OrbitControls（カメラ、renderer.domElement）を意味; このようなものが後に続く controls.dollyIn（.5）; ？私はオブジェクトがプロパティまたはメソッドのエラーをサポートしていない取得します。 OrbitControlsオブジェクトのメンバーではないため、dollyInへの直接呼び出しを含むすべての組み合わせを試しましたが、常に同じ結果が得られます。 –

あなたは正しいです。私は方法を見つけ、私の答えを編集しました。 –

これはChrisさん、うまく動作します！ –

は、少なくとも単純な場合のために、あなたは自動的OrbitControlsを更新カメラ（例えば因子によってx、yとzを乗算）の位置を変更することができます。 <input type="range">スライダーで

例：

zoomer.addEventListener('input', function(e) { 
    var zoomDistance = Number(zoomer.value), 
     currDistance = camera.position.length(), 
     factor = zoomDistance/currDistance; 

    camera.position.x *= factor; 
    camera.position.y *= factor; 
    camera.position.z *= factor; 
});

https://codepen.io/Sphinxxxx/pen/yPZQMV

出典

2018-01-14 18:30:33 Sphinxxx

orbitcontrols.js：ズームイン/ズームアウトする方法

答えて

関連する問題