« X3DOM » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 53 : Ligne 53 :
'''Le fichier HTML'''
'''Le fichier HTML'''


<source code="html5">
<source code="XML">
<?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd">
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd">

Version du 7 avril 2016 à 17:02

Cet article est une ébauche à compléter. Une ébauche est une entrée ayant un contenu (très) maigre et qui a donc besoin d'un auteur.

Introduction

X3Dom est une proposition pour intégrer X3D dans HTML5.

Citation du site officiel (Jan 2015): X3DOM (pronounced X-Freedom) is an open-source framework and runtime for 3D graphics on the Web. It can be freely used for non-commercial and commercial purposes, and is dual-licensed under MIT and GPL license. X3DOM tries to support the ongoing discussion in the Web3D and W3C communities how an integration of HTML5 and declarative 3D content could look like, and it aims to fulfill the current HTML5 specification for declarative 3D content and allows including X3D elements as part of any HTML5 DOM tree.

Implémentation

Il existe des bibliothèques JavaScript et Flash qui utilisent Canevas et WebGL

Tester si votre navigateur soutient X3DOM et WebGL en natif.

Exemple

HTML et code X3D

On peut placer directement du code X3D dans une page HTML. Par contre il ne peut pas être validé et on déconseille ...

<!doctype html>
<html> 
  <head> 
    <title>My first X3DOM page</title> 			
    <script src="http://www.x3dom.org/release/x3dom.js"></script>
    <link rel="stylesheet" href="http://www.x3dom.org/release/x3dom.css">
  </head> 
  <body> 
    <h1>Hello, X3DOM!</h1> 
    <p> Tournez-moi !</p>
      <x3d width='300px' height='300px'> 
        <scene> 
          <shape> 			
	    <box></box> 
	    <appearance> 
              <material diffuseColor='1 0 1'></material> 
            </appearance> 
	  </shape> 
        </scene> 
    </x3d> 
  </body> 
</html>


HTML5 avec code X3D inclus

Solution avec 2 fichiers, un html et un fichier X3D

Le fichier HTML

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE X3D PUBLIC "ISO//Web3D//DTD X3D 3.2//EN" "http://www.web3d.org/specifications/x3d-3.2.dtd">
<X3D profile='Immersive' version='3.2' xmlns:xsd='http://www.w3.org/2001/XMLSchema-instance' xsd:noNamespaceSchemaLocation='http://www.web3d.org/specifications/x3d-3.2.xsd'>
  <head>
    <meta content='Simple pink cube' name='title'/>
  </head>
  <Scene>
    <shape> 			
      <box></box> 
      <appearance> 
        <material diffuseColor='1 0 1'></material> 
      </appearance> 
    </shape> 
  </Scene>
</X3D>

Le fichier X3D

<!doctype html>
<html> 
  <head> 
    <title>My first X3DOM page</title> 			
    <script src="http://www.x3dom.org/release/x3dom.js"></script>
    <link rel="stylesheet" href="http://www.x3dom.org/release/x3dom.css">
  </head> 
  <body> 
    <h1>Hello, X3DOM!</h1> 
    <p> Tournez-moi !</p>
      <x3d width='300px' height='300px'> 
        <scene> 
          <shape> 			
	    <box></box> 
	    <appearance> 
              <material diffuseColor='1 0 1'></material> 
            </appearance> 
	  </shape> 
        </scene> 
    </x3d> 
  </body> 
</html>

Autres examples en HTML5