一种三维场景中物体自转及缩放的实现方法、装置及设备与流程

本发明涉及三维模型显示技术领域，特别是涉及一种三维场景中物体自转及缩放的实现方法、装置、设备以及计算机可读存储介质。

背景技术：

three.js为一个开源webgl库，对webgl提供的接口进行了非常好的封装，简化了很多的细节，前端开发者通常都是使用three.js实现3d绘图。three.js提供的轨道控制器orbitcontrols目前只支持三维场景中物体的自动旋转，鼠标控制放大和缩小，并未提供api使物体可以在一定范围内自动放大缩小交替变。

已有的技术方案都是通过将场景中所有物体组合成一个组，改变这个组的旋转角度，使这个组进行自旋转动画，再通过改变相机距离组中心的位置的大小，实现自缩放的效果。现有实现三维场景中物体自缩放效果的技术方案成本较高，需要花费较长的时间。

综上所述可以看出，如何减少实现三维场景中物体自转同时自缩放的效果所需成本及耗时是目前有待解决的问题。

技术实现要素：

本发明的目的是提供一种三维场景中物体自转及缩放的实现方法、装置、设备以及计算机可读存储介质，以解决现有实现三维场景中物体自缩放效果的技术方案成本较高且耗时长的问题。

为解决上述技术问题，本发明提供一种三维场景中物体自转及缩放的实现方法，包括：在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转；利用requsetanimationframe依据帧频对浏览器页面进行重绘，在所述浏览器页面每次重绘前调用回调函数更新所述三维场景与相机位置，其中，所述回调函数由场景渲染函数与所述轨道控制器的更新函数组成；在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置，根据所述当前三维位置距所述三维场景中心点的当前距离，更新所述相机与所述三维场景中心点的目标距离，以得到所述相机的目标三维位置；其中，所述当前距离大于等于预设最小距离阈值小于等于预设最大距离阈值；将所述目标三维位置传输至所述轨道控制器后，运行所述更新函数，以便所述相机沿预设椭圆轨道运行的同时改变所述相机与所述三维场景中心点之间的距离，然后运行所述场景渲染函数对所述三维场景重新渲染。

优选地，所述在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转包括：

在所述三维场景中新建所述轨道控制器；

通过设置controls.autorotate＝true，将所述三维场景设置为自动旋转模式。

优选地，所述利用requsetanimationframe依据帧对浏览器页面进行重绘，在所述浏览器页面每次重绘前调用回调函数更新所述三维场景与相机位置包括：

将render()函数与controls.update()函数设置为所述回调函数；

将所述回调函数设置为所述requsetanimationframe的参数；

调用所述requsetanimationframe依据帧对所述浏览器页面进行重绘，在所述浏览器页面每次重绘前调用所述render()函数与所述controls.update()函数更新所述三维场景与相机位置。

优选地，所述在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置，根据所述当前三维位置距所述三维场景中心点的当前距离，更新所述相机与所述三维场景中心点的目标距离，以得到所述相机的目标三维位置包括：

在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置；

确定所述当前三维位置距所述三维场景中心点的当前距离，将所述当前距离增加或减小预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；

根据所述目标距离，确定所述相机的目标三维位置。

优选地，所述确定所述当前三维位置距所述三维场景中心点的当前距离，将所述当前距离增加或减小预设距离长度后，得到所述相机与所述三维场景中心点的目标距离包括：

判断所述当前距离是否等于所述预设最小距离阈值；

若所述当前距离等于所述预设最小距离阈值，则将所述当前距离增加所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；

若所述当前距离不等于所述预设最小距离阈值，则判断所述当前距离是否等于所述预设最大距离阈值；

若所述当前距离等于所述预设最大距离阈值，则将所述当前距离减小所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；

若所述当前距离不等于所述预设最大距离阈值，则判断前一帧所述相机至所述三维场景中心点的距离是否小于所述当前距离；

若前一帧所述相机至所述三维场景中心点的距离小于所述当前距离，则将所述当前距离增加所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；

若前一帧所述相机至所述三维场景中心点的距离大于所述当前距离，则将所述当前距离减小所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离。

本发明还提供了一种三维场景中物体自转及缩放的实现装置，包括：

添加模块，用于在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转；

重绘模块，用于利用requsetanimationframe依据帧对浏览器页面进行重绘，在所述浏览器页面每次重绘前调用回调函数更新所述三维场景与相机位置，其中，所述回调函数由场景渲染函数与所述轨道控制器的更新函数组成；

获取模块，用于在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置，根据所述当前三维位置距所述三维场景中心点的当前距离，更新所述相机与所述三维场景中心点的目标距离，以得到所述相机的目标三维位置；

运行模块，用于将所述目标三维位置传输至所述轨道控制器后，运行所述更新函数，以便所述相机沿预设椭圆轨道运行的同时改变所述相机与所述三维场景中心点之间的距离，然后运行所述场景渲染函数对所述三维场景重新渲染。

优选地，所述在添加模块包括：

新建单元，用于在所述三维场景中新建所述轨道控制器；

设置单元，用于通过设置controls.autorotate＝true，将所述三维场景设置为自动旋转模式。

优选地，所述重绘模块包括：

函数设置单元，用于将render()函数与controls.update()函数设置为所述回调函数；

参数设置单元，用于将所述回调函数设置为所述requsetanimationframe的参数；

调用单元，用于调用所述requsetanimationframe依据帧对所述浏览器页面进行重绘，在所述浏览器页面每次重绘前调用所述render()函数与所述controls.update()函数更新所述三维场景与相机位置。

本发明还提供了一种三维场景中物体自转及缩放的实现设备，包括：

存储器，用于存储计算机程序；处理器，用于执行所述计算机程序时实现上述一种三维场景中物体自转及缩放的实现方法的步骤。

本发明还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述一种三维场景中物体自转及缩放的实现方法的步骤。

本发明所提供的三维场景中物体自转及缩放的实现方法，在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转，以便实现所述三维场景中物体自动旋转的效果。将场景渲染函数与所述轨道控制器的更新函数作为回调函数传入所述requsetanimationframe，调用所述requsetanimationframe，在所述浏览器页面每次重绘前调用所述回调函数更新所述三维场景与相机位置。由于所述轨道控制器的实现原理是改变相机的位置，而物体位置不变，为了实现所述三维场景中物体的自缩放效果，在运行所述更新函数前获取所述相机的当前三维位置，从而得到所述相机距所述三维场景中心点之间的距离。更新所述相机与所述三维场景中心点之间的距离，获取所述相机的目标三维位置。将所述目标三维位置发送至所述轨道控制器后，执行所述更新函数，使所述相机在预设椭圆轨道运行的同时，改变与所述三维场景中心点的距离。当前帧的相机位置与上一帧相机位置相对比，同时改变了相机旋转角度与距离中心点的远近距离，再完成所述场景渲染函数的运行后，则实现了所述三维场景中物体自转同时自缩放的效果。本发明所提供的方法，在轨道控制器已经对物体的旋转做了一个很好的封装，也提供了很好的鼠标交互方式的基础之上，在场景定时渲染之前，改变相机距创建中心的远近距离，即可达到三维场景中物体自动旋转的同时自动放大缩小的效果，且成本低，耗时短，可以达到一个很好的交互。

附图说明

为了更清楚的说明本发明实施例或现有技术的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明所提供的三维场景中物体自转及缩放的实现方法的第一种具体实施例的流程图；

图2为本发明所提供的三维场景中物体自转及缩放的实现方法的第二种具体实施例的流程图；

图3为本发明实施例提供的一种三维场景中物体自转及缩放的实现装置的结构框图。

具体实施方式

本发明的核心是提供一种三维场景中物体自转及缩放的实现方法、装置、设备以及计算机可读存储介质，减少了实现三维场景中物体自转同时自缩放的效果所需成本及耗时。

为了使本技术领域的人员更好地理解本发明方案，下面结合附图和具体实施方式对本发明作进一步的详细说明。显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参考图1，图1为本发明所提供的三维场景中物体自转及缩放的实现方法的第一种具体实施例的流程图；具体操作步骤如下：

步骤s101：在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转；

所述轨道控制器提供可设置场景是否自动旋转的参数，通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转，具体实现程序如下所示：

constcontrols＝newthree.orbitcontrols(camera，

renderer.domelement)；

controls.autorotate＝true；

在添加所述轨道控制器之后，相机会以场景中心点为中心，沿着一条椭圆轨道运动，类似地球绕着太阳转动，从而实现所述三维场景中物体的全方位展示。

步骤s102：利用requsetanimationframe依据帧频对浏览器页面进行重绘，在所述浏览器页面每次重绘前调用回调函数更新所述三维场景与相机位置，其中，所述回调函数由场景渲染函数与所述轨道控制器的更新函数组成；

所述requestanimationframe为浏览器用于定时循环操作的一个接口，主要用途为依据帧频对网页进行重新绘制。所述requestanimationframe接受一个回调函数作为参数，将所述场景渲染函数render()以及所述轨道控制器的更新函数controls.update()作为回调函数传进去，使得页面每次重绘的时候都可以更新场景和相机位置；所述requestanimationframe的结构如下所示：

步骤s103：在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置，根据所述当前三维位置距所述三维场景中心点的当前距离，更新所述相机与所述三维场景中心点的目标距离，以得到所述相机的目标三维位置；其中，所述当前距离大于等于预设最小距离阈值小于等于预设最大距离阈值；

在所述轨道控制器执行所述更新函数之前，获取所述相机的当前三维位置。所述轨道控制器的实现原理是改变所述相机的位置，物体位置不变，展现的效果是通过所述相机所看到的物体，此时所述相机是参照物，所以对于运动的相机来说，所述三维场景中的物体是运动的。获取所述相机的当前三维位置的程序如下所示：

constspherical＝newthree.spherical()；

spherical.setfromvector3(controls.object.position)；

假设所述相机的当前三维位置距所述三维场景中心点的距离为1500，所述距离范围为1000到2000；现在可以将所述相机至所述三维场景中心点的距离更新为1500±10，从而得到所述相机的目标三维位置。若所述相机的初始三维位置距所述三维场景中心点的初始距离为1000，每更新一帧，所述相机与所述三维场景中心点之间的距离增加10，直至所述相机与所述三维场景中心点的距离为最大值2000后，则每更新一帧，所述相机距所述三维场景中心点的距离减小10，直至所述相机与所述三维场景中心点的距离为最小值1000，如此循环往复，改变所述相机与所述三维场景中心点之间的距离，以实现所述三维场景中物体自缩放的效果。

步骤s104：将所述目标三维位置传输至所述轨道控制器后，运行所述更新函数，以便所述相机沿预设椭圆轨道运行的同时改变所述相机与所述三维场景中心点之间的距离，然后运行所述场景渲染函数对所述三维场景重新渲染。

将所述相机的目标三维位置转换成(x，y，z)的坐标形式传给所述轨道控制器，再去执行所述轨道控制器的更新函数，此时相机的位置已经旋转了一定的角度，并且改变了距离场景中心的远近距离，场景重新渲染之后看到的便是相机改变之后展示的效果。

如上，每次所述浏览器页面重新渲染的时候都会改变所述相机的旋转角度和距离中心的远近距离，每一帧相机位置都不同，从而形成了连续的动画效果，实现了三维场景中物体在自动旋转的同时并且实现物体在一定范围内放大缩小的效果，且成本低，耗时短，并且达到一个很好的交互。

基于上述实施例，在本实施例中，将render()函数与controls.update()函数以回调函数的形式上传至requsetanimationframe。通过对所述相机的当前三维位置距所述三维场景中心点的当前距离增加或减小预设距离长度后，得到所述相机与所述三维场景中心点的目标距离。

请参考图2，图2为本发明所提供的三维场景中物体自转及缩放的实现方法的第二种具体实施例的流程图；具体操作步骤如下：

步骤s201：在三维场景中新建轨道控制器，并将所述三维场景设置为自动旋转模式；

步骤s202：将render()函数与controls.update()函数设置为所述回调函数，将所述回调函数设置为所述requsetanimationframe的参数；

步骤s203：调用所述requsetanimationframe依据帧对所述浏览器页面进行重绘，在所述浏览器页面每次重绘前调用所述render()函数与所述controls.update()函数更新所述三维场景与相机位置；

步骤s204：在运行所述controls.update()函数前，获取相机的当前三维位置；

步骤s205：确定所述当前三维位置距所述三维场景中心点的当前距离，将所述当前距离增加或减小预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；

步骤s206：根据所述目标距离，确定所述相机的目标三维位置；

步骤s207：将所述目标三维位置传输至所述轨道控制器后，运行所述controls.update()函数，以便所述相机沿预设椭圆轨道运行的同时改变所述相机与所述三维场景中心点之间的距离；

步骤s208：运行所述render()函数对所述三维场景重新渲染，以实现所述三维场景中物体自转同时自缩放的效果。

本实施例所提供的方法在three.js已有的轨道控制器基础之上进行改进：所述轨道控制器提供了非常好的鼠标交互，可实现自动旋转效果；在此基础之上再通过控制所述相机与所述三维场景中心点之间的远近距离以实现自动缩放效果，实现成本较低，耗时少，效率高，并且可以达到很好的展示效果，全方位展示3d物体。

请参考图3，图3为本发明实施例提供的一种三维场景中物体自转及缩放的实现装置的结构框图；具体装置可以包括：

添加模块100，用于在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转；

重绘模块200，用于利用requsetanimationframe依据帧对浏览器页面进行重绘，在所述浏览器页面每次重绘前调用回调函数更新所述三维场景与相机位置，其中，所述回调函数由场景渲染函数与所述轨道控制器的更新函数组成；

获取模块300，用于在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置，根据所述当前三维位置距所述三维场景中心点的当前距离，更新所述相机与所述三维场景中心点的目标距离，以得到所述相机的目标三维位置；

运行模块400，用于将所述目标三维位置传输至所述轨道控制器后，运行所述更新函数，以便所述相机沿预设椭圆轨道运行的同时改变所述相机与所述三维场景中心点之间的距离，然后运行所述场景渲染函数对所述三维场景重新渲染。

本实施例的三维场景中物体自转及缩放的实现装置用于实现前述的三维场景中物体自转及缩放的实现方法，因此三维场景中物体自转及缩放的实现装置中的具体实施方式可见前文中的三维场景中物体自转及缩放的实现方法的实施例部分，例如，添加模块100，重绘模块200，获取模块300，运行模块400，分别用于实现上述三维场景中物体自转及缩放的实现方法中步骤s101，s102，s103和s104，所以，其具体实施方式可以参照相应的各个部分实施例的描述，在此不再赘述。

本发明具体实施例还提供了一种三维场景中物体自转及缩放的实现设备，包括：存储器，用于存储计算机程序；处理器，用于执行所述计算机程序时实现上述一种三维场景中物体自转及缩放的实现方法的步骤。

本发明具体实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述一种三维场景中物体自转及缩放的实现方法的步骤。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(ram)、内存、只读存储器(rom)、电可编程rom、电可擦除可编程rom、寄存器、硬盘、可移动磁盘、cd-rom、或技术领域内所公知的任意其它形式的存储介质中。

以上对本发明所提供的三维场景中物体自转及缩放的实现方法、装置、设备以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。