Use the x3dom framework and WebGL to display a three-dimensional model in a browser

To display 3D images in a browser, WebGL is usually used.Three. js(Http://mrdoob.github.com/three.js/),WebGLThe browser version and video card have high requirements, and many clients cannot use them normally.

Later, I found it online.X3DOM(Http://www.x3dom.org/), by using different backend ),X3DOMIt can be compatible with earlier versions of browsers (mainly the IE series) or run without the support of video cards. The commonly used non-WebGL backend is Adobe Flash Player 11, IE can also support WebGL through Google Chrome Frame. Note that versions earlier than Flash 11 cannot run normally.

X3DOMPassed in the StandardHTML5Add XML elements in X3D format to the DOMX3DThe format of 3D models embedded into the HTML page function; on the http://www.x3dom.org/website has a wealth of examples and more detailed documentation, but thoroughly understand the estimated need for some 3D modeling knowledge, such as fieldOfView.

In addition, web3D Consortium has a lot of information aboutX3DInformation, especiallyX3D tooltips(Http://www.web3d.org/x3d/content/X3dTooltips.html), is a comprehensiveX3DNode element quick query manual (available in Chinese)(I don't know why www.web3d.org is GWF. You can download it here);

Preliminary understandingX3domIn the following exampleX3domSimple encapsulation, focusing onDisplay of stacking methods of goods in containers and other containersYou can add goods of different sizes (cubes) in the form of "Box", view the stacking status from different angles, and display the selection/highlight of these cubes, the specific code can be downloaded to the https://github.com/thinkbase/dev-thinkbase.net/tree/master/.research/x3dom-container-fill, note that the html file used for testing can not be opened directly locally, must be deployed on the HTTP server to run properly; if you do not want to trouble, you can see here.

Shows the actual display effect.(The effect of Flash backend is much better if the system supports WebGL):

• Posted: (Updated)
• Author: thinkbase
• Categories: webgl javascript x3d x3dom 3D OpenGL