实例介绍
【实例简介】
基于WEBGL的3D试衣系统的实现。使用了HTML5、JavaScript以及Three．js库。通过多种接口，使数据在不同系统之间流畅传递与转换，实现面向真人的三维虚拟试衣的目标
摘要 随着电子商务及现代信息技术的发展,3D逐渐融入日常生活中。互联网上, 各类的试衣产品层出不穷,但都不能满足用户的需要。研究和开发面向真人的三 维虚拟试衣系统成了社会发展的需要。 WEBGL试衣系统作为一种新型的3D试衣系统,给用户提供了更逼真的环 境及模型,为用户解决了服装尺寸是否适合的问题,及服装颜色是否合适用户肤 色的问题。更提供了多种娱乐选项,满足用户体验 本文详细叙述了基于 WEBGL的3D试衣系统的诞生过程,它融合了 HTML5、 JavaScript以及 Three. js库。通过多种接口,使数据在不同系统之间流 畅传递与转换,实现面向真人的三维虚拟试衣的目标。 本文主要工作可以分为三个部分。首先,是根据用户需求定义系统功能,选 定运用何种技术进行开发系统;其次,是系统的设计过程,包括页面显示层的设 计、逻辑层的设计、数据接口及本地数据库的设计;最后,是整个系统的实现与 测试过程,特别是 Three. js平台的运用实现了模型的加载与变形,也是整篇论文 的技术要领体现过程。现在系统已经能够做到最基本的人体变形,更换试衣,性 别切换及肤色切换等功能。 关键字: JavaScript; Three. js;HTML5 Abstract With the development of e-commerce and modem information technology, 3D has gradually integrated into the daily life. It can't meet the demand of users, though varieties of fitting products are emerging in endlessly on the Intermet. Research and develop the 3d virtual reality-oriented fitting room system has become the need of social development As the project is a new kind of 3D fitting room system, it brings users a virtual emulational condition and model, also solve the problem of apparel sizing. And whether the color suits user's complexion. What's more, it offers entertainment choices for user experience This article describes the progress of the birth of 3D fitting system based on WEBGL. This integrated with HTML5, JavaScript and Three js library. Though some interfaces data could transform and circulate between different interfaces. This work has achieved the goal of the 3D virtual reality-oriented fitting system The main research work of this article may be divided into three parts. First according to users requirements to define the system function and decide what technology to use to develop the system. Secondly, the progress of system designs. It includes page display layer in Web design, logic layer design, data interface and database design. Finally, is the progress of system implementation and testing Especially the loading and deformation of the model through Three. js platform is the technical points of the article. Now our project has been able to do the most basic of human body deformation, change the fitting, and switch gender and skin color, and other functions Keywords: JavaScript; Three jS, HTML5 目录 第一章绪论 鲁·●●命●●鲁·●·看●●44●命●@●鲁山山●●合命●你●带看备垂命命一咖●●●自自毒·辛哥看●鲁鲁带·命●●看自●鲁鲁●●● 11项目背最及意义 非导导●导章影备静命。晶争●看。命鲁●鲁●●命命食● 1.1.1三维世界 1.12服装经济. 4·●鲁看4·。w.非。·●s.也。ta自·a。a 1.13电子商务 3 ,2国内外发展状况….94 13本文研究内容 14论文结构安排 8 第二章基本理论及相关技术介绍 ●●●●●·●●辛咖●●●号●●●卷鲁 2.1 WEBGL述 ●香命鲁b命b●D争● 命●身看●命命●鲁象咖参命●看。 11 WEBGL理论 鲁·即曾鲁。非射·即·非自音非D。..看 10 212着色器原理简介 13 21.3发展状况. 14 22相关技术介绍. 14 221HTML5概述… 15 222 Three. js概述 16 223 JavaScript概述… 18 23本章小结… 21 第三章系统需求分析 22 31业务播求分析…00.22 311业务分类 22 3.12业务流程 32用户需求分析 24 3.2.1问题分析 24 3.2.2目标制定 24 基于 WEBGL的3D试衣系统的设计与实现 33功能需求分析. 一 25 33.1功能分析 25 332功能定位 26 34非功能需求分析…27 34.1性能需求 …27 34.2易用性需求 歌。非。·。非非.。。也 28 343安全性需求 29 35本章小结 29 第四章系统设计 30 41系统总体设计 41.1系统流程设计 30 41.2系统架构设计. 要非。非普。·音即音··非非非自非非自非串·as●● 30 42系统前台设计… 32 42.1页面设计 132 422前台流程设计 4吾音·中晋非命非b ● 3 43系统后台设计… n34 43.1数据处理层设计 。。.。.。·.4bbd.D 34 43.2本地库的设计 44本章小结 ●●暴●··●·●●·●●●·是··母命··吾●品是命●备中中母合鲁品●●●合4●。●带●命鲁告命命命●命 第五章系统实现与测试 n38 5系统主界面的实现 ●昏鲁●春是●导命音●命。鲁命。●·●●鲁鲁鲁●。告●● 511页面布局的实现 8 5.1.2人体模型的实现 39 51.3人体模型变形的实现. 514纹理添加的实现 ,卷非●看··。。。。·自击。。。垂 44 2系统辅界面的实现 521辅网页的实现 52 522服装的实现 ⅥI 目录 53界面测试 56 531测试方法 香·。非 ∴56 53,2功能测试顺序及要求. …57 54主网页测试…-1157 54.1男模型变形测试 59 542女模型变形测试.6 55辅网页测试 61 5.5.1模型试衣测试 62 552应用按钮测试 56本章小结 第六章总结与展望 ●告。鲁●合●bc●●自鲁鲁●●看●鲁鲁。●●@鲁非●鲁参●●鲁鲁鲁鲁●鲁●●辛鲁●告●●鲁●●鲁 65 61总结 5 62展望...66 参考文献 67 68 VII Contents Contents Chapter 1 Introduction ●●●鲁看@●● 1.1 The Program's Background and significance.oooo....-.--.. 1.1.1 3D Worlds 1.1.2 Clothing economy…… 1.1. 3 Electronic Commence............. 1.2 Present Development Situations 1.3 Main Study Contents. 1.4 Construction Arrangement of the article........ Chapter 2 Basic Concept and Related Techniques.eeseeceoeeoesoso. 7899 2.1 Introduction of WEBGL ●命●·●●●。单备命命·单●合命非命单命春毒看命命●身命命命春·●鲁章命命·合命看合命会章 2.1.1 Concept of WEBGL 10 ●杳春b如专 2. 1.2 Concept of Shader Principle 2.1.3 Development of WEBGL …14 2.2 Introduction of Related Techniques 2.2.1 Introduction of hTml5 2.2.2 Introduction of Three js 568 2.2.3 Introduction of JavaScript……… 垂●··非春.。.· 2.3 Summary of Chapter 2. 21 Chapter 3 Requirement Analysis of The Project...o-e. 22 3. 1 Business Requirement analysis .ocoooeooooeoooooo..o.............. 22 3. 1.1 Business sort 2 3.1.2 Business process 23 3.2 User Requirement Analysis 24 3. 2. 1 Problem Analysis ·s。一看。s..·非音。自·;s中·中普t··身语··章.·音·专 24 322 Goal Setting….…… 24 3.3 Functional Requirement Analysis.,.... 25 3.31 Functional Analysis…… 25 基于 WEBGL的3D试衣系统的设计与实现 3.3.2 Functional Definition 34Non- Functional Requirement Analysis…,…,……………28 3.4.1 Performance Requirement 28 3.4.2 Usability Requirement 28 3.4.2 Security Requirement.............29 3.5 Summary of Chapter 3 Chapter 4 System Design.o... 30 4.1 Collectivity Design 41.1 System Process design……… 130 4.1.2 System Architecture design……… 号要·看非; 32 4.2 Systematic Proscenium design..ooe ●看●。●办●命由命鲁命●。●看命命●鲁。●●●鲁 n32 4.2.1 Page Design............3 42.2 Proscenium Process Design...….….…………35 4.3 Systematic Background Design 4.2.1 Data Processing Design 36 4.2.2 Local Library design 37 44 Summary of Chapter4.……...37 Chapter 5 System Implementating and Testing.ooooooooo 38 5.1 Implementation of Main Platform.. 38 5.1. 1 Implementation of Page display. ...............................................38 5.1.2 Implementation of Model........ 39 5.1.3 Implementation of Model Distortion.. 42 5.1.4 Implementation of Tectures....... 45 5.2 Implementation of Subsidiary Platform..………52 5.2. 1 Implementation of Subsidiary Web 音身非非音非自合甲非·音。。自非非非·自。b自甲。节甲· 52 5.2.2 Implementation of Clothes ◆·垂·自。b甲鲁最非·垂鲁击音自。自·自 53 53 Interface Test… 56 5.3.1 Test method 56 Contents 5.3.2 Functional Test Order And Requirement 57 5.4 Test The Homepageeseoessoeeeeeeeeoeoeeeeeeeeeoeeo99o.57 5.4.1 Male Model Deformation Test 矿非·面●·音 5.4.2 Female model Deformation Tes 55 Auxiliary web test… ●●命鲁鲁●●●参辛● 辛●●D告鲁·●鲁鲁命告●。●鲁争身看●非办4●◆音备鲁鲁命命命 61 5.5.1 Model Fitting Test. 5.5.2 Application Button Test 5.6 Summary of Chapter 5..o0..0 6 Chapter 6 Summary and prospects ●鲁●●非命。自●●●●。·●●●●。。●音●·。鲁● 65 61 Summary…, 65 6.2 Prospect 。。也。命电普春曾专●命中业命命命带带兽带带命带带鲁曾命血物带鲁命鲁曾物鲁命音带 References.. Acknowledgement eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeo9696899 ●·鲁●●·鲁●鲁●鲁●鲁自●●●●●鲁鲁● 68 XI 【实例截图】
【核心代码】
基于WEBGL的3D试衣系统的实现。使用了HTML5、JavaScript以及Three．js库。通过多种接口，使数据在不同系统之间流畅传递与转换，实现面向真人的三维虚拟试衣的目标
摘要 随着电子商务及现代信息技术的发展,3D逐渐融入日常生活中。互联网上, 各类的试衣产品层出不穷,但都不能满足用户的需要。研究和开发面向真人的三 维虚拟试衣系统成了社会发展的需要。 WEBGL试衣系统作为一种新型的3D试衣系统,给用户提供了更逼真的环 境及模型,为用户解决了服装尺寸是否适合的问题,及服装颜色是否合适用户肤 色的问题。更提供了多种娱乐选项,满足用户体验 本文详细叙述了基于 WEBGL的3D试衣系统的诞生过程,它融合了 HTML5、 JavaScript以及 Three. js库。通过多种接口,使数据在不同系统之间流 畅传递与转换,实现面向真人的三维虚拟试衣的目标。 本文主要工作可以分为三个部分。首先,是根据用户需求定义系统功能,选 定运用何种技术进行开发系统;其次,是系统的设计过程,包括页面显示层的设 计、逻辑层的设计、数据接口及本地数据库的设计;最后,是整个系统的实现与 测试过程,特别是 Three. js平台的运用实现了模型的加载与变形,也是整篇论文 的技术要领体现过程。现在系统已经能够做到最基本的人体变形,更换试衣,性 别切换及肤色切换等功能。 关键字: JavaScript; Three. js;HTML5 Abstract With the development of e-commerce and modem information technology, 3D has gradually integrated into the daily life. It can't meet the demand of users, though varieties of fitting products are emerging in endlessly on the Intermet. Research and develop the 3d virtual reality-oriented fitting room system has become the need of social development As the project is a new kind of 3D fitting room system, it brings users a virtual emulational condition and model, also solve the problem of apparel sizing. And whether the color suits user's complexion. What's more, it offers entertainment choices for user experience This article describes the progress of the birth of 3D fitting system based on WEBGL. This integrated with HTML5, JavaScript and Three js library. Though some interfaces data could transform and circulate between different interfaces. This work has achieved the goal of the 3D virtual reality-oriented fitting system The main research work of this article may be divided into three parts. First according to users requirements to define the system function and decide what technology to use to develop the system. Secondly, the progress of system designs. It includes page display layer in Web design, logic layer design, data interface and database design. Finally, is the progress of system implementation and testing Especially the loading and deformation of the model through Three. js platform is the technical points of the article. Now our project has been able to do the most basic of human body deformation, change the fitting, and switch gender and skin color, and other functions Keywords: JavaScript; Three jS, HTML5 目录 第一章绪论 鲁·●●命●●鲁·●·看●●44●命●@●鲁山山●●合命●你●带看备垂命命一咖●●●自自毒·辛哥看●鲁鲁带·命●●看自●鲁鲁●●● 11项目背最及意义 非导导●导章影备静命。晶争●看。命鲁●鲁●●命命食● 1.1.1三维世界 1.12服装经济. 4·●鲁看4·。w.非。·●s.也。ta自·a。a 1.13电子商务 3 ,2国内外发展状况….94 13本文研究内容 14论文结构安排 8 第二章基本理论及相关技术介绍 ●●●●●·●●辛咖●●●号●●●卷鲁 2.1 WEBGL述 ●香命鲁b命b●D争● 命●身看●命命●鲁象咖参命●看。 11 WEBGL理论 鲁·即曾鲁。非射·即·非自音非D。..看 10 212着色器原理简介 13 21.3发展状况. 14 22相关技术介绍. 14 221HTML5概述… 15 222 Three. js概述 16 223 JavaScript概述… 18 23本章小结… 21 第三章系统需求分析 22 31业务播求分析…00.22 311业务分类 22 3.12业务流程 32用户需求分析 24 3.2.1问题分析 24 3.2.2目标制定 24 基于 WEBGL的3D试衣系统的设计与实现 33功能需求分析. 一 25 33.1功能分析 25 332功能定位 26 34非功能需求分析…27 34.1性能需求 …27 34.2易用性需求 歌。非。·。非非.。。也 28 343安全性需求 29 35本章小结 29 第四章系统设计 30 41系统总体设计 41.1系统流程设计 30 41.2系统架构设计. 要非。非普。·音即音··非非非自非非自非串·as●● 30 42系统前台设计… 32 42.1页面设计 132 422前台流程设计 4吾音·中晋非命非b ● 3 43系统后台设计… n34 43.1数据处理层设计 。。.。.。·.4bbd.D 34 43.2本地库的设计 44本章小结 ●●暴●··●·●●·●●●·是··母命··吾●品是命●备中中母合鲁品●●●合4●。●带●命鲁告命命命●命 第五章系统实现与测试 n38 5系统主界面的实现 ●昏鲁●春是●导命音●命。鲁命。●·●●鲁鲁鲁●。告●● 511页面布局的实现 8 5.1.2人体模型的实现 39 51.3人体模型变形的实现. 514纹理添加的实现 ,卷非●看··。。。。·自击。。。垂 44 2系统辅界面的实现 521辅网页的实现 52 522服装的实现 ⅥI 目录 53界面测试 56 531测试方法 香·。非 ∴56 53,2功能测试顺序及要求. …57 54主网页测试…-1157 54.1男模型变形测试 59 542女模型变形测试.6 55辅网页测试 61 5.5.1模型试衣测试 62 552应用按钮测试 56本章小结 第六章总结与展望 ●告。鲁●合●bc●●自鲁鲁●●看●鲁鲁。●●@鲁非●鲁参●●鲁鲁鲁鲁●鲁●●辛鲁●告●●鲁●●鲁 65 61总结 5 62展望...66 参考文献 67 68 VII Contents Contents Chapter 1 Introduction ●●●鲁看@●● 1.1 The Program's Background and significance.oooo....-.--.. 1.1.1 3D Worlds 1.1.2 Clothing economy…… 1.1. 3 Electronic Commence............. 1.2 Present Development Situations 1.3 Main Study Contents. 1.4 Construction Arrangement of the article........ Chapter 2 Basic Concept and Related Techniques.eeseeceoeeoesoso. 7899 2.1 Introduction of WEBGL ●命●·●●●。单备命命·单●合命非命单命春毒看命命●身命命命春·●鲁章命命·合命看合命会章 2.1.1 Concept of WEBGL 10 ●杳春b如专 2. 1.2 Concept of Shader Principle 2.1.3 Development of WEBGL …14 2.2 Introduction of Related Techniques 2.2.1 Introduction of hTml5 2.2.2 Introduction of Three js 568 2.2.3 Introduction of JavaScript……… 垂●··非春.。.· 2.3 Summary of Chapter 2. 21 Chapter 3 Requirement Analysis of The Project...o-e. 22 3. 1 Business Requirement analysis .ocoooeooooeoooooo..o.............. 22 3. 1.1 Business sort 2 3.1.2 Business process 23 3.2 User Requirement Analysis 24 3. 2. 1 Problem Analysis ·s。一看。s..·非音。自·;s中·中普t··身语··章.·音·专 24 322 Goal Setting….…… 24 3.3 Functional Requirement Analysis.,.... 25 3.31 Functional Analysis…… 25 基于 WEBGL的3D试衣系统的设计与实现 3.3.2 Functional Definition 34Non- Functional Requirement Analysis…,…,……………28 3.4.1 Performance Requirement 28 3.4.2 Usability Requirement 28 3.4.2 Security Requirement.............29 3.5 Summary of Chapter 3 Chapter 4 System Design.o... 30 4.1 Collectivity Design 41.1 System Process design……… 130 4.1.2 System Architecture design……… 号要·看非; 32 4.2 Systematic Proscenium design..ooe ●看●。●办●命由命鲁命●。●看命命●鲁。●●●鲁 n32 4.2.1 Page Design............3 42.2 Proscenium Process Design...….….…………35 4.3 Systematic Background Design 4.2.1 Data Processing Design 36 4.2.2 Local Library design 37 44 Summary of Chapter4.……...37 Chapter 5 System Implementating and Testing.ooooooooo 38 5.1 Implementation of Main Platform.. 38 5.1. 1 Implementation of Page display. ...............................................38 5.1.2 Implementation of Model........ 39 5.1.3 Implementation of Model Distortion.. 42 5.1.4 Implementation of Tectures....... 45 5.2 Implementation of Subsidiary Platform..………52 5.2. 1 Implementation of Subsidiary Web 音身非非音非自合甲非·音。。自非非非·自。b自甲。节甲· 52 5.2.2 Implementation of Clothes ◆·垂·自。b甲鲁最非·垂鲁击音自。自·自 53 53 Interface Test… 56 5.3.1 Test method 56 Contents 5.3.2 Functional Test Order And Requirement 57 5.4 Test The Homepageeseoessoeeeeeeeeoeoeeeeeeeeeoeeo99o.57 5.4.1 Male Model Deformation Test 矿非·面●·音 5.4.2 Female model Deformation Tes 55 Auxiliary web test… ●●命鲁鲁●●●参辛● 辛●●D告鲁·●鲁鲁命告●。●鲁争身看●非办4●◆音备鲁鲁命命命 61 5.5.1 Model Fitting Test. 5.5.2 Application Button Test 5.6 Summary of Chapter 5..o0..0 6 Chapter 6 Summary and prospects ●鲁●●非命。自●●●●。·●●●●。。●音●·。鲁● 65 61 Summary…, 65 6.2 Prospect 。。也。命电普春曾专●命中业命命命带带兽带带命带带鲁曾命血物带鲁命鲁曾物鲁命音带 References.. Acknowledgement eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeo9696899 ●·鲁●●·鲁●鲁●鲁●鲁自●●●●●鲁鲁● 68 XI 【实例截图】
【核心代码】
标签：
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论