Looking for breakthrough ideas for innovation challenges? Try Patsnap Eureka!

Method of loading 3D models in web page

A model, 3D technology, applied in special data processing applications, instruments, electrical digital data processing, etc., can solve the problems of inability to support web 3D model animation, not enough advanced browsers, high time and money costs, to achieve standardization and feasibility. Iterative development, easy maintenance and update, the effect of reducing development cost

Active Publication Date: 2018-02-09
SHENZHEN CUBESPACE TECH CO LTD
View PDF2 Cites 17 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0002] The existing FLASH does not support 3D models, and can only do pseudo 3D animations, but cannot directly display real 3D animations on web pages. The 3D animations made by HTML5 3D can perform simple interactive operations such as zooming, dragging, and flipping, and cannot Realize interactive operations such as model explosion and 3D model separation, and cannot directly import 3D models into web pages. It needs to be coded to generate 3D models. The workload is very heavy, and the cost of time and money is high. Not advanced browsers cannot Support web page 3D model animation

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Method of loading 3D models in web page

Examples

Experimental program
Comparison scheme
Effect test

Embodiment Construction

[0028] The present invention will be further described below in conjunction with accompanying drawing:

[0029] Now there is a 3D model in dae format, according to the method of the present invention, the 3D model can be imported into the webpage, and a series of interactive operations can be performed on the model.

[0030] (1) Reference jQuery.js and three.js in the html page, as well as some auxiliary js plug-ins, initialize the scene and render (including adding cameras and lights), add the 3D model to the scene, and then add the scene to the html In the page, the 3D model is added to the web page.

[0031] (2) Set the scene where the model is located. Users can adjust the lighting and background in the scene to make the model in an optimal visual state. When the user does not make this setting, the scene will use the default lighting and background, which has no inevitable impact on the display of the 3D model.

[0032] (3) Set the animation play and stop of the 3D mod...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention discloses a method of loading 3D models in a web page. The method includes the following steps: 1, introducing Three.js and related plug-ins in HTML code; 2, writing js code, and utilizing a loader, which is provided by the Three.js, to import the 3D models into a js file; 3, adding the 3D models into a scene created in the previous step, and setting scene light, a camera, the sceneand a renderer; 4, appending the scene into a body tag in the HTML code through appendchild; 5, defining interaction operations on the 3D models by coding in the js file; and 6, showing the loaded 3Dmodels in the web page. The method has the advantages that (1) extra plug-ins and flash do not need to be installed, real web page 3D animations are realized, a workload of a developer is reduced, andthus development costs are greatly reduced; (2) the external 3D models can be optionally loaded into the web page; (3) the series of interaction operations can be carried out on the loaded 3D models;and (4) independence of the models is kept, the web page code is separated from the model code, a coupling degree is low, and maintenance and updating are easy.

Description

technical field [0001] The invention relates to the technical field of computer virtual reality, in particular to a method for loading a 3D model in a web page. Background technique [0002] The existing FLASH does not support 3D models, and can only do pseudo 3D animations, but cannot directly display real 3D animations on web pages. The 3D animations made by HTML5 3D can perform simple interactive operations such as zooming, dragging, and flipping, and cannot Realize interactive operations such as model explosion and 3D model separation, and cannot directly import 3D models into web pages. It needs to be coded to generate 3D models. The workload is very heavy, and the cost of time and money is high. Not advanced browsers cannot Support web page 3D model animation. Contents of the invention [0003] The purpose of the present invention is to provide a method for loading 3D models in webpages, so as to realize real 3D animations of webpages, to load external 3D models int...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
Patent Type & Authority Applications(China)
IPC IPC(8): G06F17/30
CPCG06F16/9574
Inventor 饶钟权刘红邬前伟李庆松黎玉玲刘鹏程俞益飞周烨张自忠邱孝扬赵子云汪全杨恺
Owner SHENZHEN CUBESPACE TECH CO LTD
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Patsnap Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Patsnap Eureka Blog
Learn More
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic, Popular Technical Reports.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap|About US| Contact US: help@patsnap.com