Méthode de mise en œuvre de l'effet de mise à l'échelle du champ de vision Three.js3D

Cet article présente principalement l'effet de mise à l'échelle du champ de vision 3D obtenu par three.js en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Tout d'abord, plus de bêtises, qu'est-ce que three.js et ce qu'il fait. Si vous savez, vous savez. Si vous ne savez pas, allez sur Baidu.

L'éditeur recommande un article pour tout le monde : Tutoriel de démarrage rapide Three.js

Hier, j'ai découvert que les effets de réduction et d'agrandissement du champ de vision 3D dans three.js peuvent être obtenus en utilisant la mise au point lointaine et proche de la caméra.

Après un zoom arrière :

Une caméra perspective est utilisée ici :

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

Ici, vous pouvez modifier la valeur du fov et mettre à jour la caméra.

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

De plus : Nous sommes tous habitués à utiliser la molette de la souris de haut en bas pour obtenir l'effet de zoom, alors regardez le code

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();
    }

Recommandations associées :

Tutoriel Three.js sur le dessin d'un cube 3D

Implémentation Three.js de Partage d'exemples de cartes 3D

Exemples détaillés de HTML5 et CSS3 pour obtenir un effet de conversion 3D

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!