De HTML bestanden en het CSS bestand                        terug naar de inleiding

Hier staat de code voor enkele HTML bestanden voor javascripts dus voor de schetsen die niet in een html bestand staan

1) HTML bestand voor schetsen die alleen van het three.js script gebruik maken

Het three.js script staat  in de map build  zie github   "build/three.js".   Het css bestand komt in de map styles

In regel 13 moet je natuurlijk  "de_schets.js" vervangen door de naam van de zelf gemaakte schets.

 

 

<html> 
  <head> 
    <title>De titel van de animatie</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="styles/main.css" rel="stylesheet" type="text/css"> 
    <meta charset="UTF-8" /> 
  </head> 
 
  <body> 
    <div id="scene-container"</div> 
    <script src="./build/three.js"></script> 
    <script src="./schetsen/de_schets.js"></script> 
  </body> 
</html>
 

2) Het HTML bestand met de scripts:

 
 

 <html> 
  <head> 
    <title>De titel van de animatie</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="UTF-8" /> 
    <link href="styles/main.css" rel="stylesheet" type="text/css"> 
  </head> 
 
  <body> 
    <div id="scene-container"</div>
    <a id="exportLink" href="#">animatie opslaan en downloaden</a>
 
    <script src="./build/three.js"></script> 
    <script src="./examples/js/controls/OrbitControls.js"></script>       
    <script src="./examples/js/libs/dat.gui.min.js"></script> 
    <script src="./schetsen/de_schets.js"></script> 
  </body> 
</html>


 
Het CSS bestand main.css komt in de map styles
 
 

/* main.css */ 
body { 
  margin: 0px; 
  overflow: hidden; 
  color: white; 
  text-align: center; 
} 
 
h1 { 
  position: absolute; 
  width: 100%; 
  z-index: 1; 
  font-size: 1.5rem; 
} 
 
a { 
  color: white; 
} 
a:link{ 
  background-color: green; 
} 
 
#scene-container { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
}
 

Het HTML  bestand met CSS style en linken naar scripts op de  three.js  site

In regel 39 moet je natuurlijk "de_schets.js" vervangen door de naam van de zelf gemaakte schets.

 
 

<html> 
  <head> 
    <title>8 kubussen en drie cylinders</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="UTF-8" /> 
    <style> 
      body { 
        margin: 0px; 
        overflow: hidden; 
        color: white; 
        text-align: center; 
      } 
      h1 { 
        position: absolute; 
        width: 100%; 
        z-index: 1; 
        font-size: 1.5rem; 
      } 
      a { 
        color: white; 
      } 
      a:link{ 
        background-color: green; 
      } 
      #scene-container { 
        position: absolute; 
        width: 100%; 
        height: 100%; 
      } 
    </style> 
  </head> 
 
  <body> 
    <div id="scene-container"</div>
    <a id="exportLink" href="#">animatie opslaan en downloaden</a> 
    <script src="https://threejs.org/build/three.js"></script> 
    <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> 
    <script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script> 
    <script src="./schetsen/de_schets.js"></script> 
  </body> 
</html>