Detailed explanation of Three.js using orbit controls plug-in (orbit control) to control model interaction

This article mainly introduces to you the relevant information about Three.js using orbit controls plug-in, that is, orbit control to control the interactive actions of the model. The article introduces it in detail through the example code, which has certain reference and learning value for everyone. , friends who need it can come and take a look below.

Recommended Manual：JavaScript Chinese Reference Manual

##Preface

This article mainly introduces to you the relevant content about Three.js using orbit controls plug-in (orbit control) to control model interaction. This effect is better than the trackball plug-in in Section 8, although the trackball plug-in can scroll back and forth. , but it is easy to distinguish the relationship between up, down, left and right, and it is easy to be confused, so it is suitable for debugging, while the orbit control plug-in orbit is suitable for customers to use and will not produce confusing effects. Let’s talk about its use below.

(1) First introduce the plug-in, the file address is examples/js/controls/OrbitControls.js in the official case.

(2) Then instantiate the function, pass in the DOM of the camera and renderer, and set the relevant settings.

//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放 
 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) Finally, call orbit’s

update() update within the animate function.

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

achieved the relevant effects.

The following are all case codes:

 
 
 
  
  
  

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

Recommended related articles: ​ ​ 1.
Use three.js to create a project ​ 2.
Detailed explanation of the application of charts generated by echarts in three.js
Related video recommendations:1.
Quick introduction to JavaScript_Jade Girl Heart Sutra series

The above is the detailed content of Detailed explanation of Three.js using orbit controls plug-in (orbit control) to control model interaction. For more information, please follow other related articles on the PHP Chinese website!