概述

最近在做一个3D相关的项目，项目中有一个需求是需要支持点击鼠标左键拖动画面中的相应模型移动位置。由于自己是刚接触3D这块一开始对这个需求还是比较懵的，于是从网上找了个DEMO，于是就跟着这个demo做一个剖析

引用资源

我们将three的包引用进来，我们需要的包主要有

• three - 主体包
• OrbitControls - 拖动控制
• stats - 实时监测性能

效果预览

• 主体部分圆球支持拖动视角，选中圆球支持拖动，放大缩小
• 左上角实时显示帧率，实时反应出当前状态

代码分析

• 场景初始化

场景初始化
THREE.Scene() - 场景
THREE.FogExp2(color:Integer，density:Float) - 添加画面雾数
THREE.PerspectiveCamera() - 添加透视相机
THREE.Vector3() - 设置摄像机三维坐标
THREE.WebGLRenderer() - 设置渲染器，通过WebGL渲染页面
场景初始化完成后，通过document.createElement创建DOM作为渲染载体，也可以通过自行创建DOM然后绑定在进行渲染也可以
场景添加完成后都需要通过Scene.add()添加后才能正常显示

• 添加场景控制

THREE.OrbitControls() - 添加控制器，控制模型交互

• 添加灯光

THEEE.AmbientLight() - 添加环境光
THREE.DirectionalLight() - 添加平行光
光源设置完成后，camera.add()添加进camera

• 确定交叉点位置

THREE.Mesh() - 表示基于以三角形为polygon mesh（多边形网格）的物体的类
THREE.PlaneBufferGeometry() - 平面缓冲几何体
THREE.MeshBasicMaterial() - 基础网格材质

• 添加球型模型（随机添加）

THREE.SphereGeometry() - 几何球体
THREE.MeshPhongMaterial() - 设置球体材质

• 添加性能监听

THREE.Clock() - 用于跟踪时间
new Stats() - 性能监控插件，设置完成后设置样式，并在页面左上角显示出来

• 绑定鼠标事件

• 添加监听事件：

mousedown - 鼠标按下时触发
mousemove - 鼠标拖动时触发
mouseup - 鼠标松开时触发

• mousedown

详解
- 获取鼠标位置
let mouseX = (event.clientX / window.innerWidth) * 2 - 1;
let mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
- 获取鼠标三维坐标
通过Vector3()获取三维坐标
- 点击获取相交对象，并计算出拉动的距离
THREE.Raycaster() 计算出鼠标在三维空间中经过了什么物体，并且通过intersectObjects属性计算出物体和鼠标射线的交叉点从而确定拖动的物体，且如果经过的物体不止一个，可以通过intersectObjects返回值数组第一个来获取顶层,并将获取到的参数存入selection参数中

• mousemove

详解
- 获取鼠标位置
let mouseX = (event.clientX / window.innerWidth) * 2 - 1;
let mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
- 获取鼠标三维坐标
通过Vector3()获取三维坐标
- 判断selection参数属性
通过判断selection参数值，如果属性值不为空则表示当前触发的移动模型，如果为空则表示该操作为移动视角

• mouseup

参数重置

• 场景设置、更新以及渲染

场景设置、更新以及渲染相关

总结

这个案例是从网上找的一个demo，跟我当前所要达到的效果比较接近，一开始看它的代码还是比较懵的，于是就逐步分析它的代码，争取做到比较好的理解它的思路。虽然这个拖动是一个简单的功能，但是涉及到的部分还是比较多的。要考虑的部分比较多，需要有比较全面思考的思路，对于这方面知识还不是那么全面的我来说还是有比较大的学习意义

参考资料

https://www.script-tutorials.com/webgl-with-three-js-lesson-10/

http://www.yanhuangxueyuan.com/threejs/docs/index.html