Explication détaillée de Three.js utilisant le plug-in de contrôle d'orbite (contrôle d'orbite) pour contrôler l'interaction du modèle

Cet article vous présente principalement les informations pertinentes sur Three.js utilisant le plug-in de contrôle d'orbite, c'est-à-dire le contrôle d'orbite pour contrôler l'interaction du modèle. L'article le présente en détail à travers un exemple de code, qui a une certaine valeur de référence et d'apprentissage. pour tout le monde. , les amis qui en ont besoin peuvent venir jeter un oeil ci-dessous.

Manuel recommandé : Manuel de référence en chinois JavaScript

Avant-propos

Cet article vous présente principalement le contenu pertinent sur Three.js utilisant le plug-in de contrôle d'orbite (contrôle d'orbite) pour contrôler l'interaction du modèle. Cet effet est meilleur que le plug-in trackball de la section 8, bien que le plug-in trackball puisse faire défiler. d'avant en arrière, mais il est facile de distinguer la relation entre le haut, le bas, la gauche et la droite, et il est facile de se confondre, il convient donc au débogage, tandis que l'orbite du plug-in de contrôle d'orbite convient aux clients. utilisation et ne produira pas d’effets déroutants. Parlons de son utilisation ci-dessous.

(1) Présentez d'abord le plug-in, l'adresse du fichier est dans examples/js/controls/OrbitControls.js du cas officiel.

(2) Ensuite, instanciez la fonction, transmettez le DOM de la caméra et du moteur de rendu, et définissez les paramètres pertinents.

//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 
 var controls; 
 function initControls() { 
 
  controls = new THREE.OrbitControls( camera, renderer.domElement ); 
 
  // 如果使用animate方法时，将此函数删除 
  //controls.addEventListener( 'change', render ); 
  // 使动画循环使用时阻尼或自转 意思是否有惯性 
  controls.enableDamping = true; 
  //动态阻尼系数 就是鼠标拖拽旋转灵敏度 
  //controls.dampingFactor = 0.25; 
  //是否可以缩放 
  controls.enableZoom = true; 
  //是否自动旋转 
  controls.autoRotate = true; 
  //设置相机距离原点的最远距离 
  controls.minDistance = 200; 
  //设置相机距离原点的最远距离 
  controls.maxDistance = 600; 
  //是否开启右键拖拽 
  controls.enablePan = true; 
 }

(3) Enfin, appelez la mise à jour update() d'orbite dans la fonction animer.

function animate() { 
  //更新控制器 
  controls.update(); 
  render(); 
 
  //更新性能插件 
  stats.update(); 
  requestAnimationFrame(animate); 
 }

obtient les effets pertinents.

Voici tous les codes de cas :

 
 
 
  
  
  
 
 
 
 
 
 
 
<script> 
 var renderer; 
 function initRender() { 
  renderer = new THREE.WebGLRenderer({antialias:true}); 
  renderer.setSize(window.innerWidth, window.innerHeight); 
  document.body.appendChild(renderer.domElement); 
 } 
 
 var camera; 
 function initCamera() { 
  camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000); 
  camera.position.set(0, 0, 400); 
 } 
 
 var scene; 
 function initScene() { 
  scene = new THREE.Scene(); 
 } 
 
 var light; 
 function initLight() { 
  scene.add(new THREE.AmbientLight(0x404040)); 
 
  light = new THREE.DirectionalLight(0xffffff); 
  light.position.set(1,1,1); 
  scene.add(light); 
 } 
 
 function initModel() { 
  var map = new THREE.TextureLoader().load("examples/textures/UV_Grid_Sm.jpg"); 
  var material = new THREE.MeshLambertMaterial({map:map}); 
 
  var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 200, 100, 1, 1, 1), material); 
  scene.add(cube); 
 } 
 
 //初始化性能插件 
 var stats; 
 function initStats() { 
  stats = new Stats(); 
  document.body.appendChild(stats.dom); 
 } 
 
 //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 
 var controls; 
 function initControls() { 
 
  controls = new THREE.OrbitControls( camera, renderer.domElement ); 
 
  // 如果使用animate方法时，将此函数删除 
  //controls.addEventListener( &amp;#39;change&amp;#39;, render ); 
  // 使动画循环使用时阻尼或自转 意思是否有惯性 
  controls.enableDamping = true; 
  //动态阻尼系数 就是鼠标拖拽旋转灵敏度 
  //controls.dampingFactor = 0.25; 
  //是否可以缩放 
  controls.enableZoom = true; 
  //是否自动旋转 
  controls.autoRotate = true; 
  //设置相机距离原点的最远距离 
  controls.minDistance = 200; 
  //设置相机距离原点的最远距离 
  controls.maxDistance = 600; 
  //是否开启右键拖拽 
  controls.enablePan = true; 
 } 
 
 function render() { 
  renderer.render( scene, camera ); 
 } 
 
 //窗口变动触发的函数 
 function onWindowResize() { 
  camera.aspect = window.innerWidth / window.innerHeight; 
  camera.updateProjectionMatrix(); 
  render(); 
  renderer.setSize( window.innerWidth, window.innerHeight ); 
 
 } 
 
 function animate() { 
  //更新控制器 
  controls.update(); 
  render(); 
 
  //更新性能插件 
  stats.update(); 
  requestAnimationFrame(animate); 
 } 
 
 function draw() { 
  initRender(); 
  initScene(); 
  initCamera(); 
  initLight(); 
  initModel(); 
  initControls(); 
  initStats(); 
 
  animate(); 
  window.onresize = onWindowResize; 
 } 
</script> 

Articles connexes recommandés :
1.Utilisez three.js pour créer un projet ​
2.Explication détaillée de l'application des graphiques générés par echarts dans three.js
Recommandations vidéo associées :
1.Introduction rapide à JavaScript_Jade Série Girl Heart Sutra

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!