Fivos DOGANIS | Fivos.DOGANIS@3DS.com
Votre première page web (voir atelier sur les widgets)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Titre de la page</title> </head> <body> <header>L’entête : introduction au HTML (tag Header)</header> <h1>Un second titre mais avec la balise H1</h1> <!-- Ceci est un commentaire, ignoré par le navigateur --> </body> </html>
Allez sur https://codepen.io/fivos/pen/GRNjbMd
Mettez vous en plein écran
Change View
Full Page View
naviguez dans la scène (clavier / souris)
c'est comme Mozilla Hubs!
en prenant le temps d'ajouter des formes plus complexes, vous pouvez créer des sites 3D
et même des jeux en VR
voici d'autres exemples pour ceux qui veulent en savoir plus
Permettent de créer une page web 3D en moins de 20 lignes de code
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Hello, WebXR and A-Frame!</title> <meta name="description" content="Hello, WebVR! • A-Frame"> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene background="color: #ECECEC"> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane> </a-scene> </body> </html>
en haut à droite: Change View > Editor View
Editor View
pour éviter les claculs, convertissez en ligne
position, orientation, taille
Comme en 2D
avec de la profondeur en plus
Il suffit d'augmenter ou de diminuer x, y et z dans le code position="x y z"
position="x y z"
Résultat
Les angles sont en degrés
Il suffit d'augmenter ou de diminuer x, y et z (en degrés) dans le code rotation="x y z"
rotation="x y z"
Chaque objet est transformé par rapport à son centre!
En modifiant une ligne de code! (ou presque) grâce à Jeeliz
<head>
<script src="https://jeeliz.com/demos/faceFilter/dist/jeelizFaceFilter.js"></script> <script src="https://jeeliz.com/demos/faceFilter/libs/aFrame/aframe-v0.8.2_modified.js"></script>
<body>
canvas
onload="main()"
id="jeelizFaceFilterFollow"
<!-- Run 'main()' AR demo code when page loads --> <body onload="main()" style="color: white"> <!-- Create a canvas to draw our augmented video --> <canvas width="600" height="600" id="jeeFaceFilterCanvas"></canvas> <!-- Our A-Frame scene! NOTE: Thanks to the new id "jeelizFaceFilterFollow" the cube will follow your face! --> <a-scene embedded> <a-box id="jeelizFaceFilterFollow" position="0 0 0" rotation="0 0 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="0.5" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.2" height="0.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-sky color="#ECECEC"></a-sky> </a-scene> </body>
et un chapeau, un masque etc.
Allez sur https://codepen.io/fivos/pen/rNWMgdR
Modifiez si vous voulez écrire un message
<!-- -->
Cherchez dans le code des modèles à ajouter à la scène
Décommentez les lignes qui vous intéressent
<!--
-->
Faites des captures d'écran!
position
rotation
scale