當我切換攝像頭，攝像頭控制是有效的冰

我想SWITH相機類型在我threejs演示，所以我讀了官方演示：https://threejs.org/examples/#webgl_camera 當我切換攝像頭，攝像頭控制是有效的冰

但是當我測試的演示出現一些錯誤。當我按P使用cameraPerspective時，效果很好;但是當我使用O切換cameraOrtho時，cameracontrol不起作用 - 我無法旋轉或移動模型樣本。

有我的代碼：

<!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

你可以分享你上的jsfiddle – spankajd

代碼我不跟的jsfiddle falimiar .....我編輯我的問題，並把我所有的code.It是一個小驚喜，當我只在我的代碼使用一個攝像頭，可以運作良好，但當我使用兩個並嘗試在它們之間切換時，問題就會發生。 –

與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模型的兩點距離，但Raycaster.js不支持CombinedCamera.I不知道如何使用CombinedCamera和Raycaster.js來測量距離，有沒有解決方案？ –

我的IDE回聲：「THREE.Raycaster：不支持的相機類型。」 –

您可以將其標記爲正確的;）。而對於距離計算，你應該嘗試簡單的數學公式。如果您需要更多幫助，請告訴我。 – spankajd

當我切換攝像頭，攝像頭控制是有效的冰

回答

相關問題