一、建筑点击下沉

1、注意点：移动端浏览器点击事件用touch事件，不用click事件

2、屏幕坐标标准化

mouse.x = (e.touches[0].clientX / 屏幕宽度) * 2 - 1;
mouse.y = -(e.touches[0].clientY / 屏幕高度) * 2 + 1;
/*
系统自带光标的坐标是以屏幕左上角为原点，向右和向下为正的方的坐标系
坐标标准化的作用是将光标的坐标转化为以屏幕中间为原点的大小值在 -1~1的坐标值
*/

详解：

3、Raycaster原理

二、第一人称视角相机

1、相关原理：

欧拉角：简单说就是物体绕空间坐标的三个轴xyz按一定的顺序进行三次旋转，最终得到想要的形态，轴的顺序不同，旋转的角度相同，最终的形态也不相同。欧拉角详解https://blog.csdn.net/linuxheik/article/details/78842428 相关视频：https://v.youku.com/v_show/id_XNzkyOTIyMTI=.html
球面坐标：运用三个角度通过三角函数可以求出以坐标空间坐标某个点为球心的球体的球面坐标 https://baike.baidu.com/item/球坐标系/8315363?fr=aladdin

2、球面算法

原理：利用相机的lookAt方法，以相机为球心，特定长度为半径，计算球面的点调用相机lookAt方法，实现环视功能，球体坐标轴的上方向以相机的up方向相同，up方向不同算法不同，以下代码分别为xyz轴向上时的算法

            switch (this._cameraUpType) {
                case 0:
                    targetPosition.x = position.x + 100 * Math.cos(this.phi);
                    targetPosition.y = position.y + 100 * Math.sin(this.phi) * Math.sin(this.theta);
                    targetPosition.z = position.z + 100 * Math.sin(this.phi) * Math.cos(this.theta);
                    break;
                case 1:
                    targetPosition.x = position.x + 100 * Math.sin(this.phi) * Math.cos(this.theta);
                    targetPosition.y = position.y + 100 * Math.cos(this.phi);
                    targetPosition.z = position.z + 100 * Math.sin(this.phi) * Math.sin(this.theta);
                    break;
                case 2:
                    targetPosition.x = position.x + 100 * Math.sin(this.phi) * Math.cos(this.theta);
                    targetPosition.y = position.y + 100 * Math.sin(this.phi) * Math.sin(this.theta);
                    targetPosition.z = position.z + 100 * Math.cos(this.phi);
                    break
            }

3、欧拉算法

欧拉角度与四元数旋转对应公式：

具体运用

                // 转动角度
                this._euler.set(this._cameraBeta, this._cameraGamma, this._cameraAlpha, 'ZXY'); // 'ZXY' for the device, but 'ZXY' for us
                // 设置转动
                this._cameraQuaternion.setFromEuler(this._euler); // orient the device

三、第三人称视角相机

1、相关原理:

利用向量关系算相机进行旋转的四元数轴，然后进行四元数旋转

2、核心代码

                _eye.copy(_this.object.position).sub(_this.target);
                eyeDirection.copy(_eye).normalize();
                objectUpDirection.copy(_this.object.up).normalize();
                objectSidewaysDirection.crossVectors(objectUpDirection, eyeDirection).normalize();
                // 设置OUD长度与为屏幕Y值移动距离，OSD为长度为屏幕X值移动距离
                objectUpDirection.setLength(_moveCurr.y - _movePrev.y);
                objectSidewaysDirection.setLength(_moveCurr.x - _movePrev.x);
                moveDirection.copy(objectUpDirection.add(objectSidewaysDirection));
                // 转动轴
                axis.crossVectors(moveDirection, _eye).normalize();
                // 转动角度
                angle *= _this.rotateSpeed;
                // 四元数转动
                quaternion.setFromAxisAngle(axis, angle);

3、图解

四、重力感应

1、原理

调用陀螺仪三个参数，代入欧拉旋转进行旋转

2、注意点

手机陀螺仪坐标旋转与一般的object旋转不一样，遵循欧拉旋转，顺序为xyz，对应alpha，beta，gamma，手机平放为初始状态，z轴向上，Y轴向里，手机由水平状态切换至垂直状态时Y轴方向不变，且当手机由水平状态切换至垂直状态的过程中，当手机越发趋近于垂直，alpha的值将逐渐增加90度，至垂直时加到90度，gamma值将相应减少90度，所以当object的坐标没有被人为更改过，与陀螺仪的坐标是一致的时候，当陀螺仪beta角度逐渐增加到90度时，alpha增加的值刚好能边gamma增加的值所抵消，导致场景看起来没有发生剧烈扭动（因为beta增加90度后Y轴也同时发生位置变化，此时的Y轴与原本beta没有转动90度时的Z轴刚好接近重叠，而alpha和gamma的增加值又互为负数，且遵循欧拉转动，所以刚好可以互相抵消）
滑动与重力感应同时开启：横向滑动对应alpha值的叠加，对beta值不会产生影响，可以直接叠加到欧拉转动之中，竖向滑动会使object的坐标系与陀螺仪的坐标系产生偏移，导致gamma值无法与alpha值进行抵消，使场景发生偏移，所以将竖向滑动调至场景进行一次欧拉转动后再绕X轴进行一次欧拉转动，这样每次都是重新进行转动，就不会对object的坐标产生偏移影响（第一人称视角相机解决方案）

五、部署

1、项目部署到IIS服务启动后，无法获取到Oracle数据，报400错误，request error

解决方案：当前电脑的Oracle客户端为32位，程序64位与32位的客户端产生冲突，所以获取数据，在当前电脑上再安装一个Oracle 64位客户端可解决问题，注意：64位客户端安装完成后最好重启当前电脑。

Three.js项目总结