집 > 기사 > 웹 프론트엔드 > Three.js3D 시야 크기 조정 효과 구현 방법

Three.js3D 시야 크기 조정 효과 구현 방법

小云云원래의: 2018-01-18 14:33:022681검색

이 글은 3D 시야 크기 조정 효과를 구체적으로 구현하기 위한 three.js를 주로 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

우선 더 이상 말도 안되는 소리는 하지 마세요. three.js가 무엇인지, 모르신다면 Baidu에 가보세요.

편집자는 모든 사람을 위한 기사를 추천합니다: Three.js 빠른 시작 튜토리얼

저는 카메라의 원거리 및 근거리 초점을 사용하여 three.js에서 3D 시야의 축소 및 확대 효과를 얻을 수 있다는 것을 어제 발견했습니다. .

축소 후:

원근 카메라는 여기에서 사용됩니다:

//照相机配置
  var fov = 40;//拍摄距离
  var near = 1;//最小范围
  var far = 1000;//最大范围
  var camera = new THREE.PerspectiveCamera(fov, window.innerWidth / window.innerHeight, near, far);

여기에서 fov의 값을 변경하고 카메라를 업데이트할 수 있습니다.

camera.fov = fov;//fov是变量哦 
camera.updateProjectionMatrix();
renderer.render(scene, camera);

추가: 우리 모두는 확대/축소 효과를 얻기 위해 휠 위아래로 마우스를 사용하는 데 익숙하므로 코드를 살펴보세요.

canvas.addEventListener(&#39;mousewheel&#39;, mousewheel, false);
    //鼠标滑轮
    function mousewheel(e) {
      e.preventDefault();
      //e.stopPropagation();
      if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
        if (e.wheelDelta > 0) { //当滑轮向上滚动时
          fov -= (near < fov ? 1 : 0);
        }
        if (e.wheelDelta < 0) { //当滑轮向下滚动时
          fov += (fov < far ? 1 : 0);
        }
      } else if (e.detail) { //Firefox滑轮事件
        if (e.detail > 0) { //当滑轮向上滚动时
          fov -= 1;
        }
        if (e.detail < 0) { //当滑轮向下滚动时
          fov += 1;
        }
      }
      camera.fov = fov;
      camera.updateProjectionMatrix();
      renderer.render(scene, camera);
      //updateinfo();
    }

Three.js3D 시야 크기 조정 효과 구현 방법

관련 기사