Three.js3D-Sichtfeld-Skalierungseffekt-Implementierungsmethode

Dieser Artikel stellt hauptsächlich den von three.js erzielten 3D-Sichtfeldskalierungseffekt im Detail vor. Ich hoffe, dass er jedem helfen kann.

Zuerst einmal kein Unsinn mehr, was ist Three.js und was es tut. Wenn Sie es nicht wissen, gehen Sie zu Baidu.

Der Herausgeber empfiehlt jedem einen Artikel: Three.js Quick Start Tutorial

Gestern habe ich entdeckt, dass die Verkleinerung und Vergrößerung des 3D-Sichtfelds in three.js durch die Verwendung von erreicht werden kann Fern- und Nahfokus der Kamera.

Nach dem Herauszoomen:

Hier kommt eine Perspektivkamera zum Einsatz:

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

Hier können Sie den Wert von fov ändern und die Kamera aktualisieren.

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

Außerdem: Wir sind es alle gewohnt, das Mausrad nach oben und unten zu bewegen, um den Zoomeffekt zu erzielen, also schauen Sie sich den Code an

canvas.addEventListener('mousewheel', 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();
    }

Verwandte Empfehlungen:

Three.js-Tutorial zum Zeichnen eines 3D-Würfels

Three.js-Implementierung von Teilen von 3D-Kartenbeispielen

Detaillierte Beispiele für HTML5 und CSS3 zur Erzielung eines 3D-Konvertierungseffekts

Das obige ist der detaillierte Inhalt vonThree.js3D-Sichtfeld-Skalierungseffekt-Implementierungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!