Fishery Modernization ›› 2023, Vol. 50 ›› Issue (2): 50-57.

Previous Articles     Next Articles

Design of interactive fish model display system based on Three.js

  

  1. (1 Wuxi Fisheries College, Nanjing Agricultural University, Wuxi 214128, China;
    2 Key Laboratory of Freshwater Fisheries and Germplasm Resources Utilization, Ministry of Agriculture and Rural Affairs, Freshwater Fisheries Research Center, Chinese Academy of Fishery Sciences, Wuxi  214081, China)

  • Online:2023-04-20 Published:2023-04-25

基于Three.js的交互式鱼类模型展示系统设计

  1. (1 南京农业大学无锡渔业学院,江苏 无锡, 214128;
    2 中国水产科学研究院淡水渔业研究中心,农业农村部淡水渔业和种质资源利用重点实验室,江苏 无锡, 214081)

  • 作者简介:王钟泽(1998—) ,男,硕士研究生,研究方向:渔业可视化、鱼类3D场景。E-mail:2645433375@qq.com
  • 基金资助:
    国家重点研发计划“蓝色粮仓科技创新”专项(CZ2020220103)

Abstract: At present, browsers are becoming more and more mature in 3D graphics display technology. Using WebGL's third-party library Three.js to display fish 3D models is not only simple and convenient but also has obvious cross-platform advantages. Through the study of Three.js, the problems of building a fish 3D display system in the past technology, such as fewer functions, complicated construction, the need to install plug-ins to browse, and cannot to be used across platforms, can promote the related applications of fish visualization. This research mainly uses 3ds MAX software to build the fish model and herbarium model, realizes loading and interaction of models through the Three.js library, and combines Three.js with Bootstrap framework, PHP technology, MySQL, and other technologies to build the fish model display system. After completing the system construction, deploy the system to the Tencent Cloud server to complete the performance test. The results show that: this system realizes fish model search and viewing, paging display, second loading in an online environment, step-by-step loading of fish herbarium scene models, viewing fish models in Mobile VR mode, and users uploading models and displaying models online. , sharing models and other functions, with good application value. This research can provide references for fish modeling, fish 3D model compression, fishery large model scene loading, and fishery visualization.


Key words:  , 3D visualization, Fish modeling, Interactive Design, Herbarium model loading step by step, Online upload and display of fish models

摘要: 目前浏览器对三维图形显示技术越来越成熟,使用WebGL的第三方库Three.js展示鱼类3D模型不仅简单方便,而且跨平台优势明显。通过对Three.js的研究解决以往技术建立鱼类3D展示系统构功能较少、构建复杂、需要安装插件浏览和无法跨平台使用的问题,可推动鱼类可视化的相关应用。本研究主要采取3ds MAX软件建立鱼类模型和标本馆模型,通过Three.js库实现对模型的加载和交互,并将Three.js与Bootstrap框架、PHP技术、MySQL等技术结合进行搭建鱼类模型展示系统。在完成系统构建后将系统部署到腾讯云服务器中完成性能测试。结果显示:本系统实现了鱼类模型搜索查看、分页展示、在线上环境中秒加载,鱼类标本馆场景模型的分步加载,Mobile VR方式查看鱼类模型,以及用户在线上传模型、展示模型、分享模型等功能,具有较好的应用价值。本研究可为鱼类建模、鱼类3D模型的压缩、渔业大型模型场景加载和渔业可视化相关的研究提供参考。


关键词: 三维可视化, 鱼类建模, 交互设计, 标本馆模型分步加载, 鱼类模型在线上传展示