Maison >interface Web >js tutoriel >Three.js utilise le plug-in trackball (trackball) pour ajouter des fonctions interactives au modèle Explication détaillée des exemples.

Three.js utilise le plug-in trackball (trackball) pour ajouter des fonctions interactives au modèle Explication détaillée des exemples.

巴扎黑original: 2017-09-26 09:38:453291parcourir

Cet article vous présente principalement les informations pertinentes sur la façon dont Three.js utilise le plug-in trackball, c'est-à-dire le trackball pour ajouter des fonctions interactives au modèle. L'article le présente de manière très détaillée à travers un exemple de code, ce qui est très. utile pour les études ou le travail de chacun. Il a une certaine valeur de référence et d'apprentissage. Les amis qui en ont besoin peuvent y jeter un œil ci-dessous.

Préface

Avant de présenter brièvement quelques cas sur la prise en main de three.js, cet article présentera en détail Three . js Comment utiliser le plug-in trackball (trackball) pour augmenter la fonction interactive du modèle ? Je n'entrerai pas dans les détails ci-dessous. Jetons un coup d'œil à l'introduction détaillée.

Il s'agit d'un composant de three.js et nécessite des fichiers d'importation supplémentaires. L'adresse du fichier se trouve dans le cas de téléchargement officiel examples/js/controls/TrackballControls.js.

Il vous suffit de définir les propriétés pertinentes comme dans le cas, et de transmettre la caméra lors de l'instanciation. Vous pouvez obtenir des effets interactifs.

Effets disponibles :

Maintenez enfoncé le bouton gauche de la souris pour faire pivoter le modèle
Maintenez enfoncé le bouton droit de la souris et faites glisser pour déplacer le modèle
La molette de la souris permet de zoomer sur le modèle

Code du cas :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Title</title> 
 <style type="text/css"> 
  html, body { 
   margin: 0; 
   height: 100%; 
  } 
 
  canvas { 
   display: block; 
  } 
 
 </style> 
</head> 
<body onload="draw();"> 
 
</body> 
<script src="build/three.js"></script> 
<script src="examples/js/controls/TrackballControls.js"></script> 
<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 controls; 
 function initControls() { 
  controls = new THREE.TrackballControls( camera ); 
  //旋转速度 
  controls.rotateSpeed = 5; 
  //变焦速度 
  controls.zoomSpeed = 3; 
  //平移速度 
  controls.panSpeed = 0.8; 
  //是否不变焦 
  controls.noZoom = false; 
  //是否不平移 
  controls.noPan = false; 
  //是否开启移动惯性 
  controls.staticMoving = false; 
  //动态阻尼系数 就是灵敏度 
  controls.dynamicDampingFactor = 0.3; 
  //未知，占时先保留 
  //controls.keys = [ 65, 83, 68 ]; 
  controls.addEventListener( &#39;change&#39;, render ); 
 } 
  
 function render() { 
  renderer.render( scene, camera ); 
 } 
 
 //窗口变动触发的函数 
 function onWindowResize() { 
 
  camera.aspect = window.innerWidth / window.innerHeight; 
  camera.updateProjectionMatrix(); 
  controls.handleResize(); 
  render(); 
  renderer.setSize( window.innerWidth, window.innerHeight ); 
 
 } 
 
 function animate() { 
  //更新控制器 
  controls.update(); 
  render(); 
  requestAnimationFrame(animate); 
 } 
 
 function draw() { 
  initRender(); 
  initScene(); 
  initCamera(); 
  initLight(); 
  initModel(); 
  initControls(); 
 
  animate(); 
  window.onresize = onWindowResize; 
 } 
</script> 
</html>

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!

Déclaration：

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

Article précédent：Three.js utilise les statistiques du plug-in de performances pour implémenter en détail des exemples de surveillance des performancesArticle suivant：Three.js utilise les statistiques du plug-in de performances pour implémenter en détail des exemples de surveillance des performances

Articles Liés

Voir plus