CN110910515B - 一种三维场景中物体自转及缩放的实现方法、装置及设备 - Google Patents
一种三维场景中物体自转及缩放的实现方法、装置及设备 Download PDFInfo
- Publication number
- CN110910515B CN110910515B CN201911214456.7A CN201911214456A CN110910515B CN 110910515 B CN110910515 B CN 110910515B CN 201911214456 A CN201911214456 A CN 201911214456A CN 110910515 B CN110910515 B CN 110910515B
- Authority
- CN
- China
- Prior art keywords
- distance
- dimensional scene
- camera
- dimensional
- current
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T19/00—Manipulating 3D models or images for computer graphics
- G06T19/20—Editing of 3D images, e.g. changing shapes or colours, aligning objects or positioning parts
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2210/00—Indexing scheme for image generation or computer graphics
- G06T2210/61—Scene description
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2219/00—Indexing scheme for manipulating 3D models or images for computer graphics
- G06T2219/20—Indexing scheme for editing of 3D models
- G06T2219/2016—Rotation, translation, scaling
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Architecture (AREA)
- Computer Graphics (AREA)
- Computer Hardware Design (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种三维场景中物体自转及缩放的实现方法、装置、设备及计算机可读存储介质包括：在三维场景中添加轨道控制器，并将三维场景设置为自动旋转；利用requsetAnimationFrame在浏览器页面每次重绘前调用回调函数更新三维场景与相机位置；在运行更新函数前，获取相机当前三维位置，根据当前三维位置距三维场景中心点的距离，更新相机与三维场景中心点的目标距离，得到相机的目标三维位置；目标三维位置传输至轨道控制器，运行更新函数与场景渲染函数，实现三维场景中物体自转同时自缩放的效果。本发明所提供的方法、装置、设备及计算机可读存储介质，减少了实现三维场景中物体自转同时自缩放的效果所需成本及耗时。
Description
技术领域
本发明涉及三维模型显示技术领域，特别是涉及一种三维场景中物体自转及缩放的实现方法、装置、设备以及计算机可读存储介质。
背景技术
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：在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转；
所述轨道控制器提供可设置场景是否自动旋转的参数，通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转，具体实现程序如下所示：
const controls＝new THREE.OrbitControls(camera，
renderer.domElement)；
controls.autoRotate＝true；
在添加所述轨道控制器之后，相机会以场景中心点为中心，沿着一条椭圆轨道运动，类似地球绕着太阳转动，从而实现所述三维场景中物体的全方位展示。
步骤S102：利用requsetAnimationFrame依据帧频对浏览器页面进行重绘，在所述浏览器页面每次重绘前调用回调函数更新所述三维场景与相机位置，其中，所述回调函数由场景渲染函数与所述轨道控制器的更新函数组成；
所述requestAnimationFrame为浏览器用于定时循环操作的一个接口，主要用途为依据帧频对网页进行重新绘制。所述requestAnimationFrame接受一个回调函数作为参数，将所述场景渲染函数render()以及所述轨道控制器的更新函数controls.update()作为回调函数传进去，使得页面每次重绘的时候都可以更新场景和相机位置；所述requestAnimationFrame的结构如下所示：
步骤S103：在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置，根据所述当前三维位置距所述三维场景中心点的当前距离，更新所述相机与所述三维场景中心点的目标距离，以得到所述相机的目标三维位置；其中，所述当前距离大于等于预设最小距离阈值小于等于预设最大距离阈值；
在所述轨道控制器执行所述更新函数之前，获取所述相机的当前三维位置。所述轨道控制器的实现原理是改变所述相机的位置，物***置不变，展现的效果是通过所述相机所看到的物体，此时所述相机是参照物，所以对于运动的相机来说，所述三维场景中的物体是运动的。获取所述相机的当前三维位置的程序如下所示：
const spherical＝new THREE.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、或技术领域内所公知的任意其它形式的存储介质中。
以上对本发明所提供的三维场景中物体自转及缩放的实现方法、装置、设备以及计算机可读存储介质进行了详细介绍。本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。
Claims (6)
1.一种三维场景中物体自转及缩放的实现方法，其特征在于，包括：
在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转；
利用requsetAnimationFrame依据帧频对浏览器页面进行重绘，在所述浏览器页面每次重绘前调用回调函数更新所述三维场景与相机位置，其中，所述回调函数由场景渲染函数与所述轨道控制器的更新函数组成；
在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置，根据所述当前三维位置距所述三维场景中心点的当前距离，更新所述相机与所述三维场景中心点的目标距离，以得到所述相机的目标三维位置；其中，所述当前距离大于等于预设最小距离阈值小于等于预设最大距离阈值；
将所述目标三维位置传输至所述轨道控制器后，运行所述更新函数，以便所述相机沿预设椭圆轨道运行的同时改变所述相机与所述三维场景中心点之间的距离，然后运行所述场景渲染函数对所述三维场景重新渲染；
其中，所述在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转包括：
在所述三维场景中新建所述轨道控制器；
通过设置controls.autoRotate=true，将所述三维场景设置为自动旋转模式；
并且，所述根据所述当前三维位置距所述三维场景中心点的当前距离，更新所述相机与所述三维场景中心点的目标距离，以得到所述相机的目标三维位置包括：
判断所述当前距离是否等于所述预设最小距离阈值；若所述当前距离等于所述预设最小距离阈值，则将所述当前距离增加预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；若所述当前距离不等于所述预设最小距离阈值，则判断所述当前距离是否等于所述预设最大距离阈值；若所述当前距离等于所述预设最大距离阈值，则将所述当前距离减小所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；若所述当前距离不等于所述预设最大距离阈值，则判断前一帧所述相机至所述三维场景中心点的距离是否小于所述当前距离；若前一帧所述相机至所述三维场景中心点的距离小于所述当前距离，则将所述当前距离增加所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；若前一帧所述相机至所述三维场景中心点的距离大于所述当前距离，则将所述当前距离减小所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；根据所述目标距离，确定所述相机的目标三维位置。
2.如权利要求1所述的方法，其特征在于，所述利用requsetAnimationFrame依据帧对浏览器页面进行重绘，在所述浏览器页面每次重绘前调用回调函数更新所述三维场景与相机位置包括：
将render()函数与controls.update()函数设置为所述回调函数；
将所述回调函数设置为所述requsetAnimationFrame的参数；
调用所述requsetAnimationFrame依据帧对所述浏览器页面进行重绘，在所述浏览器页面每次重绘前调用所述render()函数与所述controls.update()函数更新所述三维场景与相机位置。
3.一种三维场景中物体自转及缩放的实现装置，其特征在于，包括：
添加模块，用于在三维场景中添加轨道控制器，并通过所述轨道控制器提供的设置参数将所述三维场景设置为自动旋转；
重绘模块，用于利用requsetAnimationFrame依据帧对浏览器页面进行重绘，在所述浏览器页面每次重绘前调用回调函数更新所述三维场景与相机位置，其中，所述回调函数由场景渲染函数与所述轨道控制器的更新函数组成；
获取模块，用于在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置，根据所述当前三维位置距所述三维场景中心点的当前距离，更新所述相机与所述三维场景中心点的目标距离，以得到所述相机的目标三维位置；
运行模块，用于将所述目标三维位置传输至所述轨道控制器后，运行所述更新函数，以便所述相机沿预设椭圆轨道运行的同时改变所述相机与所述三维场景中心点之间的距离，然后运行所述场景渲染函数对所述三维场景重新渲染；
其中，所述添加模块包括：
新建单元，用于在所述三维场景中新建所述轨道控制器；
设置单元，用于通过设置controls.autoRotate=true，将所述三维场景设置为自动旋转模式；
并且，所述获取模块具体用于：在运行所述轨道控制器的所述更新函数前，获取相机的当前三维位置；判断所述当前距离是否等于预设最小距离阈值；若所述当前距离等于所述预设最小距离阈值，则将所述当前距离增加预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；若所述当前距离不等于所述预设最小距离阈值，则判断所述当前距离是否等于预设最大距离阈值；若所述当前距离等于所述预设最大距离阈值，则将所述当前距离减小所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；若所述当前距离不等于所述预设最大距离阈值，则判断前一帧所述相机至所述三维场景中心点的距离是否小于所述当前距离；若前一帧所述相机至所述三维场景中心点的距离小于所述当前距离，则将所述当前距离增加所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；若前一帧所述相机至所述三维场景中心点的距离大于所述当前距离，则将所述当前距离减小所述预设距离长度后，得到所述相机与所述三维场景中心点的目标距离；根据所述目标距离，确定所述相机的目标三维位置。
4.如权利要求3所述的装置，其特征在于，所述重绘模块包括：
函数设置单元，用于将render()函数与controls.update()函数设置为所述回调函数；
参数设置单元，用于将所述回调函数设置为所述requsetAnimationFrame的参数；
调用单元，用于调用所述requsetAnimationFrame依据帧对所述浏览器页面进行重绘，在所述浏览器页面每次重绘前调用所述render()函数与所述controls.update()函数更新所述三维场景与相机位置。
5.一种三维场景中物体自转及缩放的实现设备，其特征在于，包括：
存储器，用于存储计算机程序；
处理器，用于执行所述计算机程序时实现如权利要求1或2所述一种三维场景中物体自转及缩放的实现方法的步骤。
6.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1或2所述一种三维场景中物体自转及缩放的实现方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911214456.7A CN110910515B (zh) | 2019-12-02 | 2019-12-02 | 一种三维场景中物体自转及缩放的实现方法、装置及设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911214456.7A CN110910515B (zh) | 2019-12-02 | 2019-12-02 | 一种三维场景中物体自转及缩放的实现方法、装置及设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110910515A CN110910515A (zh) | 2020-03-24 |
| CN110910515B true CN110910515B (zh) | 2023-04-25 |
Family
ID=69821665
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911214456.7A Active CN110910515B (zh) | 2019-12-02 | 2019-12-02 | 一种三维场景中物体自转及缩放的实现方法、装置及设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110910515B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113918863B (zh) * | 2021-10-25 | 2022-07-08 | 北京优锘科技有限公司 | 虚幻引擎和Three.js引擎交互一致的方法、装置、介质和设备 |
| CN114615487B (zh) * | 2022-02-22 | 2023-04-25 | 聚好看科技股份有限公司 | 一种三维模型的显示方法及设备 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1241631A2 (en) * | 2001-03-16 | 2002-09-18 | Mitsubishi Denki Kabushiki Kaisha | Surface following interaction method for adaptively sampled distance fields |
| EP2400733A1 (en) * | 2010-06-28 | 2011-12-28 | Lg Electronics Inc. | Mobile terminal for displaying augmented-reality information |
| CN108830941A (zh) * | 2018-06-25 | 2018-11-16 | ***通信集团西藏有限公司 | 3d导览方法 |
| CN109242976A (zh) * | 2018-08-02 | 2019-01-18 | 实野信息科技（上海）有限公司 | 一种基于WebGL虚拟现实自动旋转展示的方法 |
| CN110503709A (zh) * | 2019-08-26 | 2019-11-26 | 杭州师范大学 | 一种实现数据中心加载呈现大规模Web3D模型的方法 |
-
2019
- 2019-12-02 CN CN201911214456.7A patent/CN110910515B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1241631A2 (en) * | 2001-03-16 | 2002-09-18 | Mitsubishi Denki Kabushiki Kaisha | Surface following interaction method for adaptively sampled distance fields |
| EP2400733A1 (en) * | 2010-06-28 | 2011-12-28 | Lg Electronics Inc. | Mobile terminal for displaying augmented-reality information |
| CN108830941A (zh) * | 2018-06-25 | 2018-11-16 | ***通信集团西藏有限公司 | 3d导览方法 |
| CN109242976A (zh) * | 2018-08-02 | 2019-01-18 | 实野信息科技（上海）有限公司 | 一种基于WebGL虚拟现实自动旋转展示的方法 |
| CN110503709A (zh) * | 2019-08-26 | 2019-11-26 | 杭州师范大学 | 一种实现数据中心加载呈现大规模Web3D模型的方法 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110910515A (zh) | 2020-03-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110462555B (zh) | 在层子区域上选择性地应用重投影处理以优化后期重投影功率 | |
| KR102065317B1 (ko) | 동적 포비에이션 조정 | |
| CN110910515B (zh) | 一种三维场景中物体自转及缩放的实现方法、装置及设备 | |
| JP2022068328A (ja) | 三角形の再帰的細分割を用いたテッセレーション方法 | |
| WO2015153162A1 (en) | Method for efficient construction of high resolution display buffers | |
| JP4763712B2 (ja) | ３次元グラフィックスをレンダリングする方法及びデバイス | |
| KR20150093689A (ko) | 쉘 메쉬에 기초한 최적화된 다각형을 형성하기 위한 방법 | |
| US9723204B2 (en) | Dynamic motion path blur kernel | |
| CN106780659A (zh) | 一种二维态势图的生成方法及电子设备 | |
| JP2010514011A (ja) | ポストレンダー・グラフィックス回転 | |
| US20160063669A1 (en) | Dynamic Motion Path Blur User Interface | |
| US8994738B1 (en) | Systems and method for navigating between oblique views of a map | |
| CN112516595B (zh) | 岩浆渲染方法、装置、设备和存储介质 | |
| US10417789B2 (en) | Motion blur using cached texture space blur | |
| US9019279B1 (en) | Systems and method for navigating between a nadir view and an oblique view of a map | |
| JP6727575B2 (ja) | ハプティック相関グラフィック効果 | |
| CN109658495B (zh) | 环境光遮蔽效果的渲染方法、装置及电子设备 | |
| CN114979592A (zh) | 图像曲面几何校正方法、装置、电子设备及存储介质 | |
| JP2006171760A (ja) | グラフィック処理機能を有するメモリコントローラ | |
| CN116778053B (zh) | 基于目标引擎的贴图生成方法、装置、设备及存储介质 | |
| CN116740298B (zh) | 一种基于三维引擎的场景实时地图的构建方法 | |
| CN113902609B (zh) | 一种基于OpenGL嵌入式设备流畅渲染控件动画方法及设备 | |
| KR101824178B1 (ko) | 3차원 렌더링 장치에서 시점을 기반으로 투명도를 조절하는 방법 및 장치 | |
| CN116543087A (zh) | 模型渲染方法、装置、电子设备及存储介质 | |
| CN115965702A (zh) | 一种矢量图形渲染方法、装置及电子设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |