three.js 如何解决orbitcontrols 右键拖拽和放大缩小功能失效的问题

前言

本文主要给大家介绍了关于Three.js利用orbitcontrols插件（轨道控制）控制模型交互动作的相关内容,以及在引入插件时候，碰到右键拖拽和滚轮放大缩小功能没法实现的解决方案。

首先引入插件，文件地址在官方案例的 examples/js/controls/OrbitControls.js。

import OrbitControls from 'three/examples/js/controls/OrbitControls';

 其次更改配置，webpack.js,下载 imports-loader exports-loader

{
   test: require.resolve("three/examples/js/controls/OrbitControls"),
   use: "imports-loader?THREE=three"
},
{
   test: require.resolve("three/examples/js/controls/OrbitControls"),
   use: "exports-loader?THREE.OrbitControls"
 },

然后实例化函数，把相机和渲染器的dom传入，并设置相关设置。

let controls; 
 function initControls() {
  controls = new THREE.OrbitControls( camera, renderer.domElement ); 
  // 使动画循环使用时阻尼或自转 意思是否有惯性 
  controls.enableDamping = true; 
  //是否可以缩放 
  controls.enableZoom = true; 
  //是否自动旋转 
  controls.autoRotate = true; 
  //设置相机距离原点的最远距离 
  controls.minDistance = 200; 
  //设置相机距离原点的最远距离 
  controls.maxDistance = 600; 
  //是否开启右键拖拽 
  controls.enablePan = true; 
 }

最后，在animate函数内调用orbitcontrols的update更新。

function animate() {
  // 通过相机 场景 将结果渲染出来
  let delta = clock.getDelta();
  controls.update(delta);
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}