web-dev-qa-db-ja.com

Three.jsを使用してオブジェクトの周りでカメラを回転させる

WebGlRendererを使用してThree.jsでOBJ要素を表示していますが、ユーザーがオブジェクトの周りでカメラを任意の方向に回転できるようにしたいので、次の答えを見つけました。

マウスでThree.jsでカメラを回転

しかし、どちらの例でもエラーが返されます。最初の例では、プロジェクターが定義されていないということであり、「プロジェクター」の意味がわかりません。私は単純なカメラ、オブジェクトといくつかのライトを持っています。 2番目のコードは、undefinedは関数ではないことを示しています。

誰かが必要な結果を得る方法を知っていますか？

javascriptcamerathree.js
15
Fez Vrasta

これはあなたが望むものです： http://threejs.org/examples/misc_controls_orbit.html

オービットコントロールを含めます（ダウンロードした後）。

<script src="js/controls/OrbitControls.js"></script>

変数を設定します。

var controls;

コントロールをカメラに接続し、リスナーを追加します。

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

そしてアニメーション関数でコントロールを更新します：

controls.update();

[更新] controls.autoRotate = true;（v73でテストされています。OrbitControls.jsの最近のバージョンでは、このコントロールが追加されています。）

31
Matthew Riches

実際、「カメラ」を選択したオブジェクトで置き換えると、オブジェクトが回転します。ただし、周囲に他のオブジェクト（たとえば、床のグリッド）がある場合でも、オブジェクトは静止しています。それはあなたが望むものかもしれないし、それは奇妙に見えるかもしれません。 （椅子が床の上に浮かんでいるのを想像してみてください...？）

Orbitコントロールを初期化した後、コードからOrbitControls.JSの中心オブジェクトをオーバーライドすることを選択します

controls = new THREE.OrbitControls(camera, renderer.domElement);
…
controls.center =  new THREE.Vector3(
    chair.position.x,
    chair.position.y,
    chair.position.z
);

（免責事項：OrbitControls.jsにはさまざまなバージョンがあるようですが、すべてこの中央オブジェクトを使用していると思います）

1
Ideogram

OrbitControlの変更時にレンダリングメソッドをトリガーするリスナーを追加します。

    const controls = new OrbitControls(camera, this.renderer.domElement);
    controls.enableDamping = true;   //damping 
    controls.dampingFactor = 0.25;   //damping inertia
    controls.enableZoom = true;      //Zooming
    controls.autoRotate = true;       // enable rotation
    controls.maxPolarAngle = Math.PI / 2; // Limit angle of visibility
    controls.keys = {
      LEFT: 37, //left arrow
      UP: 38, // up arrow
      RIGHT: 39, // right arrow
      BOTTOM: 40 // down arrow
    };

   controls.addEventListener("change", () => {
      if (this.renderer) this.renderer.render(this.scene, camera);
    });

アニメーション更新コントロールでは：

  start = () => {
    if (!this.frameId) {
      this.frameId = requestAnimationFrame(this.animate);
    }
  };
  stop = () => {
    cancelAnimationFrame(this.frameId);
  };

  renderScene = () => {
    if (this.renderer) this.renderer.render(this.scene, camera);
  };


animate = () => {
    // update controls
    controls.update();
}
0
Hitesh Sahu