余莉

摘  要： Three.js是一个由JavaScript编写的WebGL框架，可以调用API直接在浏览器中创建和渲染三维场景。与虚拟场景进行交互的最常见方式就是鼠标拾取，点击对象可显示所点击物体信息，或修改物体属性，或激活动画。文章先介绍了拾取的基本原理，再分析和实现了组合模型的拾取、外部导入模型的拾取以及拾取多个对象等三个方面的特殊应用，对THREE.Raycaster对象的用法进行了详尽的介绍，能较全面地满足拾取在教学和虚拟现实中的应用。

关键词： Three.js; 拾取; THREE.Raycaster对象

中图分类号：TP37          文献标识码：A     文章编号：1006-8228（2020）06-61-04

Abstract： Three.js is a WebGL framework written with JavaScript， which can call APIs to create and render 3D scene directly in browser. The most common way to interact with the virtual scene is to pick up by the mouse. Click on object can display the information of the selected object， modify the object attributes， or activate animation. The basic principle of pick-up is introduced in this paper， and three special applications are analyzed and realized， i.e. the pick-up of group model， pick-up of external imported model and pick-up multiple objects， the usage of THREE.Raycaster object is also introduced in detail， which can meet the application of pick-up in teaching and virtual reality more comprehensively.

Key words： Three.js; pick-up; THREE.Raycaster object

0 引言

隨着前端展示技术的发展，HTML5和WebGL技术在虚拟现实领域的应用正逐渐增多。由于浏览器原生支持WebGL，所以不需要安装任何插件，即可观看3D效果，且具有很好的跨平台性。电脑、平板、手机等终端，只要安装有支持HTML5的浏览器，即可使用。但是直接使用WebGL编程是十分复杂的，需要扎实的计算机图形学基础，学习复杂的着色器语法[1]。Three.js库是一个由JavaScript编写的WebGL框架，实现了WebGL的封装与扩展[2]，降低了初学者开发的难度。Three.js库及其加载器可以很方便地把JSON、OBJ等格式的三维模型加载到网页中来展示，并进行光照、材质、纹理计算后的实时渲染，用户可使用鼠标旋转、平移和缩放，与虚拟场景进行简单交互[3]。

1 拾取的基本原理

浏览器上最常见的交互就是通过鼠标点击三维物体，检测实物图形是否位于鼠标指针的下方[4]，即物体的拾取操作。选中的对象会改变颜色、可见性等属性，如图1所示，选中的立方体被改为红色，或者激活对象的动画。……