一种实现720制造技术

本发明专利技术公开了一种实现720

【技术实现步骤摘要】
一种实现720
°
旋转的全景3D拼图游戏的方法


[0001]本专利技术涉及图像处理
，尤其涉及一种实现720
°
旋转的全景3D拼图游戏的方法。

技术介绍

[0002]传统的3D拼图游戏方法的具体实现方法是将三维坐标系的某一个轴固定后，用户进行旋转拼装且当用户旋转到程序指定角度后再拖拽拼图碎片进行拼接。原理为：在Three.js中，用户旋转模型时达到的视觉效果转换其实是程序改变相机的坐标来实现，设定固定的2个及以上的相机坐标，当当前相机坐标处于固定的坐标范围内时，将相机坐标校正至坐标差值最小的那个指定值；用户再次拖动旋转时，旋转角度大于设定的旋转阈值时，校正至下一个相机坐标，反之则坐标回调校正。
[0003]传统方法的缺陷或不足：由于将三维坐标系的其中一个轴固定，例如固定Z轴，当Z轴固定后整个坐标系此时只能以Z轴的延长线为中心轴进行横向(水平)旋转，如图1所示，其旋转角度只有360
°
，从用户感官上来说，此时的模型检视效果更偏向于有立体感的二维图片；用户操作时，当用户旋转到程序指定角度才可进行拼接操作，对用户的游戏自由度限制较大且无法完整检视模型。

技术实现思路

[0004]为了解决现有技术中3D拼图游戏玩法设计上的不足，本专利技术提出一种实现720
°
旋转的全景3D拼图游戏的方法。
[0005]一种实现720
°
旋转的全景3D拼图游戏的方法，包括以下步骤：
[0006]S1、模型构建：将模型主体及碎片参数化，用于设定主模型与子模型之间的位置、渲染优先级的参数关系；
[0007]S2、基于Three.js的模型渲染：将模型渲染过程中所需要配置化参数提取出来写入配置，实现模型动态渲染；
[0008]S3、基于Three.js的模型自由旋转：利用屏幕坐标和Three.js构建的三维坐标在浏览器中的映射关系，计算二维坐标和三维坐标之间的转换关系，并带入Three.js中的Vector3算法将计算得出的二维坐标转换为当前的三维坐标系中的坐标；
[0009]S4、三个鼠标事件监听：利用touchstart获取初始鼠标点击位置；touchmove实时获取移动过程中的坐标以及坐标转化、模型渲染、正反馈逻辑处理；touchend移动结束后的落点坐标值范围判定以及模型挂载逻辑处理。
[0010]优选的，所述步骤S1中的模型包括：模型数组、模型对象、模型文件路径、模型动画路径、模型名称、模型缩略图、碎片数量、相机坐标对象、模型碎片数组、碎片编号、是否展示布尔值、碎片缩略图；
[0011]优选的，所述步骤S2包括以下步骤：
[0012]S21、利用document.getElementById(＂xxx＂)获取html容器元素节点，调用
THREE.Scene()创建场景；调用THREE.PointLight()为场景添加光源；初始化相机视角位置，将S1中的相机位置配置通过camera.position.set(x，y，z)方法进行视角初始化配置；设置相机视点，通过camera.lookAt(target)初始化视点，所述相机位置为相机在空间的三维坐标，所述相机视角为相机所对准的对象。
[0013]S22、利用FBXLoader()方法构建模型：初始化仅渲染模型主体部分，其余模型碎片数据仅读取保存不做渲染；
[0014]S23、创建render渲染器，持续更新渲染数据。
[0015]优选的，所述步骤S22中，包括以下步骤：
[0016]S221、渲染碎片列表，渲染模型碎片的二维图片；
[0017]S222、读取S1中的模型对象下的碎片缩略图路径，通过＜img＞标签渲染模型碎片的二维图片。
[0018]优选的，所述步骤S4中，包括以下步骤：
[0019]S41、用户指针在任意角度上的拖拽旋转模型，触发鼠标指针touchstart事件，存储初始化指针坐标x，y轴变量；
[0020]S42、移动过程中触发touchmove事件；
[0021]S43、用户结束拖动即松开鼠标：若当前坐标处于碎片位置的误差判定在误差范围内，则直接将Xn、Yn、Zn赋值给当前模型碎片坐标，实现磁吸效果；
[0022]S44、重复以上步骤，直至所有碎片拼接完成后提示成功。
[0023]优选的，所述步骤S42中，包括以下步骤：
[0024]S421、计算鼠标移动距离用以判断是否渲染当前所选碎片模型和移除碎片缩略图；
[0025]S422、计算指针屏幕坐标对应三维坐标转换值；
[0026]S423、利用Vector3补充计算Z轴坐标；
[0027]S424、坐标赋值给模型碎片实现模型跟随鼠标指针移动效果；
[0028]S425、碎片位置误差判定；
[0029]S426、正反馈：开启模型变色效果，表示当前模型碎片在当前位置可以拼接成功，即修改模型属性中的material的值。
[0030]优选的，所述步骤S422中，所述计算指针屏幕坐标对应三维坐标转换值的计算公式为：
[0031]X＝(x/w)＊2－1；
[0032]Y＝－(y/h)＊2+1；
[0033]其中：X为转化后的X轴目标值；x为当前屏幕指针的x轴坐标；w为当前三维画布宽度；Y为转化后的Y轴目标值；y为当前屏幕指针的y轴坐标；h为当前三维画布高度。
[0034]优选的，所述步骤S425中，所述碎片位置误差判定方法为：满足任意两个条件即表示当前碎片处于正确拼接锚点中，
[0035]X轴：Xn＊0.1－Xn＜＝X1＜＝Xn＊0.1+Xn；
[0036]Y轴：Yn＊0.1－Yn＜＝Y1＜＝Yn＊0.1+Yn；
[0037]Z轴：Zn＊0.1－Zn＜＝Z1＜＝Zn＊0.1+Zn；
[0038]其中：Xn、Yn、Zn表示碎片正确坐标，存放在步骤S1的配置中；X1、Y1、Z1表示碎片在
三维坐标系中的当前坐标。
[0039]本专利技术的有益效果：
[0040]本专利技术在实现模型图像可720
°
检视以及在设计模型时将模型切割成多份，将中心坐标为(0，0，0)的碎片作为模型主体的前提下，在进行模型拼接屏幕指针对三维坐标系中的模型操作时利用Vector3将屏幕二维坐标转换成三维坐标的方法。相较于传统的3D拼图游戏，可达到用户操作高自由、模型及模型碎片多角度检视更直观的效果。
附图说明
[0041]图1为现有技术中的3D拼图游戏的旋转拼装方法示意图；
[0042]图2为本专利技术实施例的步骤四和步骤五的流程示意图；
[0043]图3为本专利技术实施例的坐标转换示意图；
[0044]图4为本专利技术本专利技术实施例的误差自动修正流程示意图。
具体实施方式
[0045]为使本申请的目的、技术方案及优点更加清楚明白本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种实现720
°
旋转的全景3D拼图游戏的方法，其特征在于，包括以下步骤：S1、模型构建：将模型主体及碎片参数化，用于设定主模型与子模型之间的位置、渲染优先级的参数关系；S2、基于Three.js的模型渲染方法：将模型渲染过程中所需要配置化参数提取出来写入配置，实现模型动态渲染；S3、基于Three.js的模型自由旋转方法：利用屏幕坐标和Three.js构建的三维坐标在浏览器中的映射关系，计算二维坐标和三维坐标之间的转换关系，并带入Three.js中的Vector3算法将计算得出的二维坐标转换为当前的三维坐标系中的坐标；S4、三个鼠标事件监听：利用touchstart获取初始鼠标点击位置；touchmove实时获取移动过程中的坐标以及坐标转化、模型渲染、正反馈逻辑处理；touchend移动结束后的落点坐标值范围判定以及模型挂载逻辑处理。2.根据权利要求1所述的一种实现720
°
旋转的全景3D拼图游戏的方法，其特征在于，所述步骤S1中的模型包括：模型数组、模型对象、模型文件路径、模型动画路径、模型名称、模型缩略图、碎片数量、相机坐标对象、模型碎片数组、碎片编号、是否展示布尔值、碎片缩略图。3.根据权利要求2所述的一种实现720
°
旋转的全景3D拼图游戏的方法，其特征在于，所述步骤S2包括以下步骤：S21、利用document.getElementById(＂xxx＂)获取html容器元素节点，调用THREE.Scene()创建场景；调用THREE.PointLight()为场景添加光源；初始化相机视角位置，将S1中的相机位置配置通过camera.position.set(x，y，z)方法进行视角初始化配置；设置相机视点，通过camera.lookAt(target)初始化视点；S22、利用FBXLoader()方法构建模型：初始化仅渲染模型主体部分，其余模型碎片数据仅读取保存不做渲染；S23、创建render渲染器，持续更新渲染数据。4.根据权利要求3所述的一种实现720
°
旋转的全景3D拼图游戏的方法，其特征在于，所述步骤S22中，包括以下步骤：S221、渲染碎片列表，渲染模型碎片的二维图片；S222、读取S1中的模型对象下的...

【专利技术属性】
技术研发人员：孙华祎，赖启天，
申请(专利权)人：四川天启智源科技有限公司，
类型：发明
国别省市：