6

わかりました、できるだけ簡潔にしようと思います。私は数学があまり得意ではありません。あなたにとって当たり前のように思えることでも、私にとってはロケット科学である可能性が高いです。

Three.js w/CSS3DRenderer を使用して、仮想ギャラリー スペースを作成しています。

FPS ゲームのような一人称視点が必要です。

カメラを前後左右に動かすことができました。

ただし、カメラを回転させると、結果が得られますここに描かれています

カメラはそのローカル軸を回転させていますが、必要なのはviewport、カメラではなく を次のように回転させることです。

ここに描かれています

だから私が必要とするのは、カメラがピボットポイント/ベクトルの周りを周回し、次を使用して再焦点を合わせることですObject3d.lookAt()

カメラを別のオブジェクトの子としてペアレント化してから、オブジェクトの軸を回転させることで問題を解決できることを認識しています。しかし、私はむしろ自分で計算したいと思います。

要するに、あるベクトル ポイントを別のベクトル ポイントの周りで回転させる方法と、その関係を数学的に表す方法を理解したいのです。

仕事を終わらせるために、three.js pointer_lock コントロールなどのスクリプトを使用したくありません。私は実際の数学で手を汚したい.

チュートリアルへのアドバイスやリンクは大歓迎です!!!

4

2 に答える 2

9

以下は、ボックスの周りを回転するカメラの例です。

これは、回転行列を適用すると常に原点を中心にオブジェクトが回転するという事実によって機能します。これは、プロパティを変更するだけの場合とは対照的です。rotationプロパティを変更すると、オブジェクトが独自の中心を中心に回転します。ここでのコツは、カメラを原点から 200 単位離すことです。これにより、回転行列を適用すると、原点を中心に円を描くように回転します。

ボックスは原点にあるため、カメラはボックスを中心に回転します。次にlookAt、カメラをボックスに向けるために使用されます。

詳細を知りたい場合は、この件に関する低レベルの説明があります: http://webglfundamentals.org/webgl/lessons/webgl-scene-graph.html

var canvas = document.getElementById('canvas');
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({canvas: canvas, antialias: true});
var camera = new THREE.PerspectiveCamera(45, canvas.clientWidth / canvas.clientWidth, 1, 1000);

var geometry = new THREE.BoxGeometry(50, 50, 50);
var material = new THREE.MeshBasicMaterial({color: '#f00'});
var box = new THREE.Mesh(geometry, material);
scene.add(box);

// important, otherwise the camera will spin on the spot.
camera.position.z = 200;

var period = 5; // rotation time in seconds
var clock = new THREE.Clock();
var matrix = new THREE.Matrix4(); // Pre-allocate empty matrix for performance. Don't want to make one of these every frame.
render();

function render() {
  requestAnimationFrame(render);
  if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
    // This stuff in here is just for auto-resizing.
    renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
    camera.aspect = canvas.clientWidth /  canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

  // Create a generic rotation matrix that will rotate an object
  // The math here just makes it rotate every 'period' seconds.
  matrix.makeRotationY(clock.getDelta() * 2 * Math.PI / period);

  // Apply matrix like this to rotate the camera.
  camera.position.applyMatrix4(matrix);

  // Make camera look at the box.
  camera.lookAt(box.position);

  // Render.
  renderer.render(scene, camera);
}
html, body, #canvas {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script>
<canvas id="canvas"></canvas>

于 2016-05-22T12:54:04.463 に答える