私はカメラ、カメラ制御は、ビングの有効

で切り替えるとき、私は私のthreejsデモでカメラのタイプを急がしたいので、私は公式のデモ読み：https://threejs.org/examples/#webgl_camera 私はカメラ、カメラ制御は、ビングの有効

をしかし、私は私のデモをテストする際に多少の誤差が生じます。 Pを押してcameraPerspectiveを使用するとうまくいきますが、Oを使用してcameraOrthoを切り替えると、カメラコントロールが機能しません - モデルサンプルを回転または移動できません。

は私のコードがある：

<!DOCTYPE html>

<head> 
    <meta charset="UTF-8"> 
    <title>3D-earth</title> 
    <script src="JSandCSS/jquery-2.2.4.min.js"></script> 
    <script src="JSandCSS/three.min.js"></script> 
    <script src="JSandCSS/OrbitControls.js"></script> 
    <script src="JSandCSS/OBJLoader.js"></script> 
    <script type="text/javascript" src="JSandCSS/jquery.qrcode.min.js"></script> 
    <script type="text/javascript" src="JSandCSS/qrcode.js"></script> 
    <script src="JSandCSS/bootstrap.min.js"></script> 
    <script type="text/javascript" src="JSandCSS/CanvasRenderer.js"></script> 
    <script src="JSandCSS/Projector.js"></script> 
    <link href="JSandCSS/bootstrap.min.css" rel="stylesheet" type="text/css"> 

</head> 

<body> 

    <div style="width: 50%;"> 
     <script> 
      var scene = new THREE.Scene(); 
      var group = new THREE.Group; 
      var mouse = new THREE.Vector2(); 
      var raycaster = new THREE.Raycaster(); 
      var objects = []; 
      init(); 

      var container, stats, titleinfo; 
      scene.add(group); 



      var textureLoader = new THREE.TextureLoader(); 
      var mat = new THREE.MeshLambertMaterial({ 
       /* Roushness:1, 
        Metalness:0,*/ 
       map: textureLoader.load("model/earth/texture.jpg"), 
       /* normalMap:textureLoader.load("model/earth/normal.jpg"),*/ 
       specularMap: textureLoader.load("model/earth/specular.jpg"), 
       lightMap: textureLoader.load("model/earth/light.jpg"), 
       side:THREE.DoubleSide, 
      }); 




      var loader = new THREE.OBJLoader(); 
      loader.load('model/earth/earth.obj', function(obj) { 
       obj.traverse(function(child) { 
        if(child instanceof THREE.Mesh) { 
         child.material = mat; 
        } 
       }); 
       mesh = obj; 
       obj.scale.set(2, 2, 2); 
       group.add(obj); 
      }); 


      var light = new THREE.PointLight(0xffffff); 
      light.position.set(300, 400, 200); 
      light.intensity.set = 0.1; 
      scene.add(light); 
      scene.add(new THREE.AmbientLight(0x333333)); 






      var cameraPerspective = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); 
      cameraPerspective.position.set(200, 200, 200); 
      cameraPerspective.lookAt(scene.position); 

      cameraOrtho = new THREE.OrthographicCamera(window.innerWidth/-4, window.innerWidth/4, window.innerHeight/4, window.innerHeight/-4, -10000, 10000); 

      ActiveCamera = cameraPerspective; 


      var renderer = new THREE.WebGLRenderer({ 
       antialias: true 
      }); 
      renderer.setSize(window.innerWidth, window.innerHeight); 
      document.body.appendChild(renderer.domElement); 

      renderer.render(scene, ActiveCamera); 
      renderer.setClearColor(0x808080, 0.5); 


      var controls = new THREE.OrbitControls(ActiveCamera); 
      controls.minDistance = 200; 
      controls.maxDistance = 400; 
      controls.autoRotate = true; 
      controls.addEventListener('change', render); 
      animate(); 
      window.addEventListener('resize', handleWindowResize, false); 
      document.addEventListener('keydown', onKeyDown, false); 



      function render() { 
       /*group.rotation.y -= 0.004;*/ 
       renderer.render(scene, ActiveCamera); 
      } 

      function animate() { 
       requestAnimationFrame(animate); 
       render(); 
      } 

      function onKeyDown(event) { 
       switch(event.keyCode) { 
        case 79: 
         ActiveCamera = cameraOrtho;              
        case 80: 
         ActiveCamera = cameraPerspective; 
       } 
      } 

      function handleWindowResize() { 
       HEIGHT = window.innerHeight; 
       WIDTH = window.innerWidth; 
       renderer.setSize(WIDTH, HEIGHT); 
       ActiveCamera.aspect = WIDTH/HEIGHT; 
       ActiveCamera.updateProjectionMatrix(); 
      } 

     </script> 

    </div> 

</body>

出典

2017-02-28 Starain.X

あなたは私は私は私の質問を編集し、すべての私のcode.Itは、私は私のコードこれで一台のカメラを使用するときにことを少し驚きです置く..... jsfiddleでfalimiarないですjsfiddle – spankajd

上でコードを共有することができますうまく動作しますが、2つを使用して切り替えようとすると、問題が発生します。 –

コードの下の展望とオーソ使用を切り替えるには、単一のカメラCombinedCameraの対象と

てみてください。

//initial 
var camera = new THREE.CombinedCamera($(canvasHold).innerWidth(), $(canvasHold).innerHeight(), 75, .1, 3e3, -5e3, 5e3); 
camera.toOrthographic(); 

function switchCamera() 
{ 
    if(ortho) // Add condition 
    { 
    camera.toOrthographic(); 
    camera.position.set(0, 0, 0); 
    camera.zoom = .5; 
    camera.up = new THREE.Vector3(0, 0, 0); 
    camera.lookAt(scene.position); 
    camera.setFov(75); 
    } 
    else 
    { 
    camera.toPerspective(); 
    camera.zoom = 1; 
    camera.setFov(45); 
    } 
}

注：必要に応じて変数と値を変更してください。

出典

2017-02-28 11:14:33 spankajd

ありがとうございました。私はまた、3Dモデルの2点の距離を測定する必要がありますが、Raycaster.jsはCombinedCameraをサポートしていません.CombinedCameraとRaycaster.jsで距離を測定する方法はわかりませんが、解決策はありますか？ –

My IDE echo ： "THREE.Raycaster：サポートされていないカメラタイプ。" –

これは正しいとマークすることができます。距離計算のためには、簡単な数式で試してみるべきです。あなたにさらなる助けが必要な場合は教えてください。 – spankajd

私はカメラ、カメラ制御は、ビングの有効

答えて

関連する問題