1

私のアプリケーションでは、3D フィギュアを表示し、オブジェクトのビューを回転させるためのコントロールをユーザーに提示します。オブジェクトを実際に回転させるのではなく、カメラをオブジェクトの周りで回転させることを好みます。これにより、後でズームインなどのアクションを追加するのが少し簡単になります。

Three.js を使えば、ある程度の半径を持った円でカメラを回転させるのは簡単な作業のように思えます。XZ 平面内で半径のある円の各点の周りにカメラを再配置して、再度照準を合わせます。私のコードは次の方法でこれを行います：

render: ->
    @camera.lookAt @model.position
    @renderer.render @scene, @camera

rotate: (theta)->
    @rotation += theta

    @camera.position.x = @cameraDistance * Math.sin(@rotation)
    @camera.position.z = @cameraDistance * Math.cos(@rotation)

    @.render()

このrotate()メソッドは、ユーザーがボタンをクリックするたびに呼び出されます。

これは単純に見えますが、実際には基本的に多くの Three.js サンプル アプリケーションで使用されているものです。ただし、これを行うと、フィギュアが行う動きは静止した回転ではありません-回転しますが、楕円形に動き回るようにも見えます（スクリーンショットを参照）。

さらに、健全性チェックを行ったときに、実行しても数値がconsole.log square(@camera.position.x) + console.log square(@camera.position.z)得られるの@cameraDistanceではなく、非常に小さな値から巨大な値に成長する値が得られることがわかりました。この場合、どういうわけか、単位円のアイデンティティーが私には当てはまらないようです。

ここで明らかな何かが欠けているように感じます。誰がそれが何であるか教えてもらえますか?

ニュートラルポジション 図は静止していません 写真の外に移動します カメラの前を通過

4

1 に答える 1

0

これは古い質問ですが：

sin と cos を混同していると思います。

OPのコード:

@camera.position.x = @cameraDistance * Math.sin(@rotation)
@camera.position.z = @cameraDistance * Math.cos(@rotation)

正しいコード:

@camera.position.x = @cameraDistance * Math.cos(@rotation)
@camera.position.z = @cameraDistance * Math.sin(@rotation)
于 2014-06-05T12:23:49.040 に答える