Detaillierte Erläuterung der Verwendung des Orbit Controls-Plug-Ins (Orbit Control) durch Three.js zur Steuerung der Modellinteraktion

Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen über Three.js vor, die das Orbit Control-Plug-in verwenden, d Für alle, Freunde, die es brauchen, können unten vorbeischauen.

Empfohlenes Handbuch: JavaScript Chinesisch-Referenzhandbuch

Vorwort

In diesem Artikel werden Ihnen hauptsächlich relevante Inhalte über die Verwendung des Orbit Control-Plug-Ins (Orbit Control) zur Steuerung der Modellinteraktion vorgestellt. Dieser Effekt ist besser als das Trackball-Plug-In in Abschnitt 8, obwohl das Trackball-Plug-In scrollen kann hin und her, aber es ist leicht, die Beziehung zwischen oben, unten, links und rechts zu unterscheiden, und es ist leicht zu verwechseln, sodass es zum Debuggen geeignet ist, während das Orbit-Control-Plug-in für Kunden geeignet ist Verwendung und wird keine verwirrenden Effekte hervorrufen. Lassen Sie uns weiter unten über seine Verwendung sprechen.

(1) Stellen Sie zunächst das Plug-In vor. Die Dateiadresse befindet sich im offiziellen Fall in examples/js/controls/OrbitControls.js.

(2) Instanziieren Sie dann die Funktion, übergeben Sie das DOM der Kamera und des Renderers und legen Sie die relevanten Einstellungen fest.

//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 
 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) Rufen Sie abschließend das update()-Update des Orbits innerhalb der Animationsfunktion auf.

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

erzielt die relevanten Effekte.

Das Folgende sind alle Fallcodes:

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

Empfohlene verwandte Artikel:
1.Verwenden Sie three.js, um ein Projekt zu erstellen ​
2.Detaillierte Erläuterung der Anwendung von Diagrammen, die von Echarts in three.js generiert wurden
Verwandte Videoempfehlungen:
1.Kurze Einführung in JavaScript_Jade Mädchen-Herz-Sutra-Serie

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Orbit Controls-Plug-Ins (Orbit Control) durch Three.js zur Steuerung der Modellinteraktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!