Three.js使用鼠标控制插件

  • 原创
  • |
  • 浏览： 1547
  • |
  • 更新：

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

这篇文章主要为大家详细介绍如何使用OrbitControls.js，轻松的通过鼠标来控制3D场景，相机对象旋转、平移、缩放。

工具/原料

方法/步骤

  1. 1

    首先到Three官网下载源码包，需要的各种JS文件都可以下这里面找到。

  2. 2

    在源码包中搜索OrbitControls.js，将其放到项目中。

  3. 3

    在页面中引入文件<script src="js/OrbitControls.js"></script>

  4. 4

    在初始化函数init中定义

    controls = new THREE.OrbitControls(camera, render.domElement);

  5. 5

    在动画函数renderScene()添加controls.update();

  6. 6

    另外特别值得一提的是，在想要通过代码控制相机视点时，使用lookAt{...}已经没有用了，在OrbitControls中，是使用controls.center来指定视点，例如

    controls.center.x=1

    这样。

    END

注意事项