Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2018-01-18 14:33:02
original
2691 Les gens l'ont consulté

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);
Copier après la connexion

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


camera.fov = fov;//fov是变量哦 
camera.updateProjectionMatrix();
renderer.render(scene, camera);
Copier après la connexion

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();
    }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal