threejs CameraHelper 查看照相机的观察范围

简单例子

这个例子，是在一个视图中，看到照相机的辅助线，也就是，一个照相机的观察访问

这样，就需要两个照相机，一个是主照相机，一个是加有辅助线的照相机（有两种，正交和透视，这里辅助的使用的是正交的）

设置两个照相机位置：注意，辅助的子照相机要在主照相机里面，这样才能在主照相机的镜头下看到辅助照相机的观察范围

 //场景、摄像机、渲染器、实体
    var scene, camera, renderer, cameraHelper;
    var cube, controls;
    //在页面加载完，进行绘制渲染页面
    window.onload = function() {
      init(); //数据初始化
      setSize(); //设置大小画布
      cube(); //绘制实体
      animate(); //动画渲染
    };
    //初始化摄像机，场景，渲染器，以及一些工具，比如摄像机辅助线，控制器
    function init() {
      scene = new THREE.Scene();
      camera = new THREE.PerspectiveCamera(
        ,
        window.innerWidth / window.innerHeight,
        0.1,

      );
      camera.position.set(, , );
      camera.lookAt(new THREE.Vector3(, , ));
      //正交投影照相机
      camera2 = new THREE.OrthographicCamera(-, , , -, , );
      renderer = new THREE.WebGLRenderer({ alpha: true });
      camera2.position.set(, , );
      camera2.lookAt(new THREE.Vector3(, , ));
      //renderer = new THREE.WebGLRenderer();
      //camera.position.z = 10;
      controls = new THREE.OrbitControls(camera);
      controls.autoRotate = true;

      //照相机帮助线
      cameraHelper = new THREE.CameraHelper(camera2);
      scene.add(cameraHelper);
    }
    //设置画布大小，这个设置为整个视图，就不需要剪切了
    function setSize() {
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
    }
    //普通的四方体
    function cube() {
      var geometry = new THREE.BoxGeometry(, , );
      var material = new THREE.MeshNormalMaterial({ color: 0x00ff00 });
      cube = new THREE.Mesh(geometry, material);
      //设置位置
      cube.position.set(, , -1.5);
      scene.add(cube);
    }
    function animate() {
      requestAnimationFrame(animate); //一帧帧动画
      cube.rotation.x += 0.005;
      cube.rotation.y += 0.005;
      cube.rotation.z += 0.005;
      camera.updateProjectionMatrix();
      controls.update();
      cameraHelper.update();
      renderer.render(scene, camera); //渲染
    }

看完简单的例子，看看复杂的，

左边是一个视图，用一个小的照相机渲染出来的就是右边辅助线的照相机，

右边是两个照相机渲染出来的，右边，外面有个大的照相机，看到里面有个小的照相机，并且通过辅助线看到里面照相机的观察区域。

html部分：是，一个Canvas ，然后拆分为左右两个视图

<canvas id="c"></canvas>
    <div class="split">
       <div id="view1" tabindex="1"></div>
       <div id="view2" tabindex="2"></div>
    </div>
  <script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/js/controls/OrbitControls.js"></script>

css

html, body {
  margin: 0;
  height: 100%;
}
#c {
  width: 100%;
  height: 100%;
  display: block;
}
.split {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
}
.split>div {
  width: 100%;
  height: 100%;
}

js，他是有两个照相机，

1.一个透视作为主照相机，

2.一个正交作为辅助照相机，

在正交照相机加上辅助线，然后把辅助线弄到场景里面，

这样我们就可以在一个照相机（主照相机下）下看到另一个照相机（另一个有辅助线的照相机）的作用范围（辅助线范围）

var renderer,
  scene,
  camera,
  camera2,
  cameraHelper,
  canvas,
  view1Elem,
  view2Elem;
function init() {
  renderer = new THREE.WebGLRenderer({ canvas });
  const size = 1;
  const near = 5;
  const far = 50;
  //正交投影照相机
  camera = new THREE.OrthographicCamera(-size, size, size, -size, near, far);
  //透视投影照相机
  camera2 = new THREE.PerspectiveCamera(
    60, // fov
    2, // aspect
    0.1, // near
    500 // far
  );
  //照相机帮助线
  cameraHelper = new THREE.CameraHelper(camera);
  scene = new THREE.Scene();
  scene.background = new THREE.Color("black");
  scene.add(cameraHelper);
}

function setCarema() {
  camera.zoom = 0.2;
  camera.position.set(0, 10, 20);

  //旋转控制器
  const controls = new THREE.OrbitControls(camera, view1Elem);
  controls.target.set(0, 5, 0);
  controls.update();

  camera2.position.set(16, 28, 40);
  camera2.lookAt(0, 5, 0);

  //旋转控制器
  const controls2 = new THREE.OrbitControls(camera2, view2Elem);
  controls2.target.set(0, 5, 0);
  controls2.update();
}

function drawObj() {
  //面的绘制

  {
    const planeSize = 40;

    const loader = new THREE.TextureLoader();
    const texture = loader.load(
      "https://threejsfundamentals.org/threejs/resources/images/checker.png"
    );
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.magFilter = THREE.NearestFilter;
    const repeats = planeSize / 2;
    texture.repeat.set(repeats, repeats);

    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
    const planeMat = new THREE.MeshPhongMaterial({
      map: texture,
      side: THREE.DoubleSide
    });
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -0.5;
    scene.add(mesh);
  }
  //正方体的绘制
  {
    const cubeSize = 4;
    const cubeGeo = new THREE.BoxBufferGeometry(cubeSize, cubeSize, cubeSize);
    const cubeMat = new THREE.MeshPhongMaterial({ color: "#8AC" });
    const mesh = new THREE.Mesh(cubeGeo, cubeMat);
    mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
    scene.add(mesh);
  }
  //球体的绘制
  {
    const sphereRadius = 3;
    const sphereWidthDivisions = 32;
    const sphereHeightDivisions = 16;
    const sphereGeo = new THREE.SphereBufferGeometry(
      sphereRadius,
      sphereWidthDivisions,
      sphereHeightDivisions
    );
    const sphereMat = new THREE.MeshPhongMaterial({ color: "#CA8" });
    const mesh = new THREE.Mesh(sphereGeo, sphereMat);
    mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
    scene.add(mesh);
  }
  //光线的设置
  {
    const color = 0xffffff;
    const intensity = 1;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(0, 10, 0);
    light.target.position.set(-5, 0, 0);
    scene.add(light);
    scene.add(light.target);
  }
}
//重新渲染 渲染器的大小，如果canvas的大小不是renderer的大小，就重新设置大小 canvas的大小，这个是因为
function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement;
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  const needResize = canvas.width !== width || canvas.height !== height;
  if (needResize) {
    renderer.setSize(width, height, false);
  }
  return needResize;
}

//剪刀，用来切割canvas 到两个view中，通过view切割计算，找到view的位置，然后进行渲染
function setScissorForElement(elem) {
  const canvasRect = canvas.getBoundingClientRect(); //包围盒的正方体
  const elemRect = elem.getBoundingClientRect();

  // compute a canvas relative rectangle
  const right = Math.min(elemRect.right, canvasRect.right) - canvasRect.left;
  const left = Math.max(0, elemRect.left - canvasRect.left);
  const bottom = Math.min(elemRect.bottom, canvasRect.bottom) - canvasRect.top;
  const top = Math.max(0, elemRect.top - canvasRect.top);

  const width = Math.min(canvasRect.width, right - left);
  const height = Math.min(canvasRect.height, bottom - top);

  // setup the scissor to only render to that part of the canvas
  const positiveYUpBottom = canvasRect.height - bottom;
  renderer.setScissor(left, positiveYUpBottom, width, height);
  renderer.setViewport(left, positiveYUpBottom, width, height);

  // return the aspect
  return width / height;
}

function render() {
  resizeRendererToDisplaySize(renderer);

  // turn on the scissor  开启剪刀，可以进行切割
  renderer.setScissorTest(true);

  // render the original view
  {
    const aspect = setScissorForElement(view1Elem);

    // update the camera for this aspect
    camera.left = -aspect;
    camera.right = aspect;
    camera.updateProjectionMatrix();
    cameraHelper.update();

    // don't draw the camera helper in the original view
    cameraHelper.visible = false;

    scene.background.set(0x000000);
    renderer.render(scene, camera);
  }

  // render from the 2nd camera
  {
    const aspect = setScissorForElement(view2Elem);

    // update the camera for this aspect
    camera2.aspect = aspect;
    camera2.updateProjectionMatrix();

    // draw the camera helper in the 2nd view
    cameraHelper.visible = true;

    scene.background.set(0x000040);
    renderer.render(scene, camera2);
  }

  requestAnimationFrame(render);
}

window.onload = function() {
  canvas = document.querySelector("#c");
  view1Elem = document.querySelector("#view1");
  view2Elem = document.querySelector("#view2");
  init();
  setCarema();
  drawObj();
  requestAnimationFrame(render);
};

上面这个例子有点小复杂，因为涉及到，剪刀进行切割视图的计算