Heim > Artikel > Web-Frontend > Three.js verwendet das Trackball-Plugin (Trackball), um dem Modell interaktive Funktionen hinzuzufügen. Detaillierte Erläuterung von Beispielen

Three.js verwendet das Trackball-Plugin (Trackball), um dem Modell interaktive Funktionen hinzuzufügen. Detaillierte Erläuterung von Beispielen

巴扎黑Original: 2017-09-26 09:38:453189Durchsuche

In diesem Artikel werden Ihnen hauptsächlich relevante Informationen darüber vorgestellt, wie Three.js das Trackball-Plug-In verwendet, d. h. den Trackball, um dem Modell interaktive Funktionen hinzuzufügen. Der Artikel stellt es sehr detailliert anhand von Beispielcode vor Nützlich für jedermanns Studium oder Arbeit. Es hat einen gewissen Referenz- und Lernwert. Freunde, die es brauchen, können einen Blick darauf werfen.

Vorwort

Bevor wir kurz einige Beispiele für den Einstieg in Three.js vorstellen, wird dieser Artikel im Detail über Three.js vorstellen Wie verwende ich das Trackball-Plugin (Trackball), um die interaktive Funktion des Modells zu erhöhen? Ich werde im Folgenden nicht auf Details eingehen.

Dies ist eine Komponente von three.js und erfordert zusätzliche Importdateien. Die Dateiadresse befindet sich im offiziellen Download-Case examples/js/controls/TrackballControls.js.

Sie müssen nur die relevanten Eigenschaften wie im Fall festlegen und die Kamera während der Instanziierung übergeben. Sie können interaktive Effekte erzielen.

Verfügbare Effekte:

Halten Sie die linke Maustaste gedrückt, um das zu drehen Modell
Halten Sie die rechte Maustaste gedrückt und ziehen Sie, um das Modell zu verschieben
Das Mausrad kann das Modell zoomen

Fallcode:

<!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>

Das obige ist der detaillierte Inhalt vonThree.js verwendet das Trackball-Plugin (Trackball), um dem Modell interaktive Funktionen hinzuzufügen. Detaillierte Erläuterung von Beispielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Three.js verwendet Leistungs-Plug-in-Statistiken, um Beispiele für die Leistungsüberwachung im Detail zu implementierenNächster Artikel：Three.js verwendet Leistungs-Plug-in-Statistiken, um Beispiele für die Leistungsüberwachung im Detail zu implementieren

In Verbindung stehende Artikel

Mehr sehen