3

ポイントを中心にカメラを回転させるには? 私はこれを始めましたが、φ = 90 と -90 のときにいくつか問題があり、そのような回転方法でカメラを回転させません

    theta = - ( ( event.clientX - lastLeft ) * 360 /window.innerWidth ) + onMouseDownTheta;
    phi = ( ( event.clientY - lastTop ) * 360 /window.innerHeight ) + onMouseDownPhi;
    var cosPhi = Math.cos( phi * Math.PI / 180 );
    var sinPhi = Math.sin( phi * Math.PI / 180 );
    var sinTheta = Math.sin( theta * Math.PI / 180 );
    var cosTheta = Math.cos( theta * Math.PI / 180 );

   camera.position.x = - radious * sinTheta * cosPhi;
   camera.position.y = radious * sinPhi;
   camera.position.z = radious * cosTheta * cosPhi;

   camera.lookAt(new THREE.Vector3(0,0,0))


  if(phi > 90){
     u = u*(-1);                
     camera.up = new THREE.Vector3(0, u, 0);
  }
  camera.updateMatrix();
4

1 に答える 1

3

一般的なタイプのカメラ コントロールが three.js に組み込まれており、簡単に実装できます。

例の多くは既にこれらのコントロール インターフェイスを使用しており、次のように簡単に利用できます。

var scene, renderer, camera, controls, clock;

function init() {
    scene = new THREE.Scene();
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    document.body.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT_RATIO, NEAR, FAR);
    controls = new THREE.TrackballControls(camera);

    clock = new THREE.Clock();

    // ... (Scene setup)

    requestAnimationFrame(update);
}

function update() {
    requestAnimationFrame(update);

    // Fetch the delta from THREE.js' clock.
    var delta = clock.getDelta();
    // Pass it to the camera controller.
    controls.update(delta);

    renderer.render();
}

// Load up the scene when the page finishes loading.
// This can be done a few different ways, this one is
// useful for script tags embedded in the <head> of the page.
window.addEventListener('load', init, false);

または、独自のコントロールを作成する場合は、コントロールのソース コードを見て、組み込みのコントローラーがカメラを操作する方法を確認することもできます: https://github.com/mrdoob/three.js/blob/master /examples/js/controls/TrackballControls.js

于 2012-08-02T16:39:29.023 に答える