Three.js项目总结

一、建筑点击下沉

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

2、屏幕坐标标准化

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

详解:

3、Raycaster原理

相关链接:https://segmentfault.com/a/1190000010490845

 

二、第一人称视角相机

1、相关原理:

 

 

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、原理

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

相关链接:https://juejin.im/post/5854bca4128fe100698d7467

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位客户端安装完成后最好重启当前电脑。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值