First commit
This commit is contained in:
284
index.html
Executable file
284
index.html
Executable file
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Maninghem Econologis - Simulateur 3D</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="description" content="" />
|
||||
<meta name="keywords" content="" />
|
||||
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
||||
<link rel="icon" href="icons/favicon.ico" />
|
||||
<link href="css/styles.css" rel="stylesheet">
|
||||
<link href="css/menus.css" rel="stylesheet">
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/all.min.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<script src="js/jsreport.js"></script>
|
||||
<script src="js/html2canvas.min.js"></script>
|
||||
<script src="js/jquery-3.4.1.min.js"></script>
|
||||
<script src="js/three.min.js"></script>
|
||||
<script src="js/OrbitControls.js"></script>
|
||||
<script src="js/threex.domevents.js"></script>
|
||||
<script src="js/dat.gui.min.js" type="text/javascript"></script>
|
||||
<script src="js/main.js" type="module"></script>
|
||||
<!-- <script src="js/helpers.js" type="module"></script>-->
|
||||
|
||||
<div class="infos">
|
||||
<h3 id="message-info" class="normal"></h3>
|
||||
</div>
|
||||
<div class="alertes">
|
||||
<h3 id="message-alerte" class="normal"></h3>
|
||||
</div>
|
||||
|
||||
<div id="div-menu-contextuel">
|
||||
<ul class="liste-deroulante">
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var scene = new THREE.Scene();
|
||||
var loader = new THREE.TextureLoader();
|
||||
var raycaster, mouse, activeCamera, controls;
|
||||
var DEBUG = true;
|
||||
|
||||
var LARGEUR_TRAVEE = 36,
|
||||
LONGUEUR_TRAVEE = 74.8,
|
||||
HAUTEUR_TRAVEE = 25,
|
||||
EPAISSEUR_MUR = 2;
|
||||
var DOWN = true;
|
||||
|
||||
var taillePoliceIncrustations = 2;
|
||||
|
||||
// Quelques constantes pratiques pour repérer les faces
|
||||
var indicePDAR = 1,
|
||||
indicePDAV = 2,
|
||||
indicePGAV = 4,
|
||||
indicePGAR = 5,
|
||||
indiceRoof = 7,
|
||||
indiceToit = 8,
|
||||
indicePignonDroit = 3,
|
||||
indicePignonGauche = 2;
|
||||
|
||||
var NB_CONSTRUCTIONS_MAXI = 2;
|
||||
var NB_TRAVEES_MAXI = 4;
|
||||
var PREFIXE_TRAVEE = "Travee ";
|
||||
var TEXTE_EXPORT = "Votre projet a été sauvegardé sous la référence <b>%s</b><br><b>Conservez-la précieusement</b> car elle vous sera demandée pour revenir ultérieurement sur votre projet.<br>";
|
||||
|
||||
var PRODUITS = new Array(9);
|
||||
|
||||
var nbTravees = nbConstructions = nbOuvertures = 0;
|
||||
var tableauTravees,
|
||||
objetsModifiables,
|
||||
facesSelectionnees,
|
||||
objetSelectionne, inventaire;
|
||||
|
||||
</script>
|
||||
|
||||
<div class="div-aide">
|
||||
<div class="div-icone"><img src="icons/help.ico" class="image-aide"></div>
|
||||
<div class="div-contenu">
|
||||
<ul class="texte-aide">
|
||||
<h3>Orientation</h3>
|
||||
<li>Notez que la <strong>boussole</strong> est TOUJOURS placée à <strong>droite</strong> de votre construction.</li>
|
||||
<li><strong>Pour tourner</strong> autour de votre construction, <strong>cliquez</strong> à l'écran puis, tout en maintenant<br>le bouton de votre souris appuyé, <strong>déplacez votre souris</strong>.</li>
|
||||
<li>Il vous est également possible de choisir des <strong>vues prédéfinies</strong> en utilisant les flèches se trouvant autour de la <strong>petite maison</strong>, au-dessus de notre logo.</li>
|
||||
<br>
|
||||
<h3>Manipulation d'objets</h3>
|
||||
<li>Pour <strong>sélectionner</strong> un élément (mur, ouverture, ...), <strong>double-cliquez</strong> sur l'élément en question.</li>
|
||||
<li>Pour <strong>avancer ou reculer</strong> une travée, sélectionnez sa <strong>face avant ou arrière</strong> puis choisissez l'action de votre choix dans le menu déroulant.</li>
|
||||
<li>Le <strong>bouton "Ajouter"</strong> permet de créer une nouvelle travée <strong>sur la droite</strong> de votre construction.</li>
|
||||
<li>Le <strong>bouton "Supprimer"</strong> supprimera la <strong>travée la plus à droite</strong> de votre construction.</li>
|
||||
</ul>
|
||||
<span class="lien-tuto"><a href="https://econologis.fr/wp-content/uploads/2021/04/Tutoriel%20modification%20design.mp4" target="_blank">Plus d'aide ? Cliquez ici.</a></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="logo">
|
||||
<img src="icons/logo2.jpg" class="image-logo">
|
||||
<h4>©TheCoreDev 2020 - v1.15</h4>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="popup-ouverture" id="popup-ouverture-out">
|
||||
<span id="titre-popup">Quel type d'ouverture voulez-vous ajouter ?</span>
|
||||
<div class="container-images">
|
||||
<figure id="F1g" class="normal"><img src="icons/MF1g.jpg" class="popup-ouverture-image" alt="Fenêtre 45x65 gauche" />
|
||||
<figcaption>Fenêtre<br>45x65cm<br>gauche</figcaption>
|
||||
</figure>
|
||||
<figure id="F1gR" class="normal"><img src="icons/MF1g.jpg" class="popup-ouverture-image" alt="Fenêtre 45x65 gauche renforcée" />
|
||||
<figcaption>Fenêtre<br>45x65cm<br>gau. renf.</figcaption>
|
||||
</figure>
|
||||
<figure id="F1d" class="normal"><img src="icons/MF1d.jpg" class="popup-ouverture-image" alt="Fenêtre 45x65 droite" />
|
||||
<figcaption>Fenêtre<br>45x65cm<br>droite</figcaption>
|
||||
</figure>
|
||||
<figure id="F1dR" class="normal"><img src="icons/MF1d.jpg" class="popup-ouverture-image" alt="Fenêtre 45x65 droite renforcée" />
|
||||
<figcaption>Fenêtre<br>45x65cm<br>dr. renf.</figcaption>
|
||||
</figure>
|
||||
<figure id="F2" class="normal"><img src="icons/MF2.jpg" class="popup-ouverture-image" alt="Fenêtre 2 vantaux 105x115" />
|
||||
<figcaption>Fenêtre<br>105x115cm</figcaption>
|
||||
</figure>
|
||||
<figure id="F2R" class="normal"><img src="icons/MF2.jpg" class="popup-ouverture-image" alt="Fenêtre 2 vantaux 105x115 renforcée" />
|
||||
<figcaption>Fenêtre<br>105x115cm<br>renf.</figcaption>
|
||||
</figure>
|
||||
<figure id="PE" class="normal"><img src="icons/MPE.jpg" class="popup-ouverture-image" alt="Porte d'entrée 90x215" />
|
||||
<figcaption>Porte entrée<br>90x215cm</figcaption>
|
||||
</figure>
|
||||
<figure id="PER" class="normal"><img src="icons/MPE.jpg" class="popup-ouverture-image" alt="Porte d'entrée 90x215 renforcée" />
|
||||
<figcaption>Porte entrée<br>90x215cm<br>renforcée</figcaption>
|
||||
</figure>
|
||||
<figure id="PE+F1" class="normal"><img src="icons/MPEF.jpg" class="popup-ouverture-image" alt="Porte d'entrée + fenêtre" />
|
||||
<figcaption>Porte entrée<br>+ fenêtre</figcaption>
|
||||
</figure>
|
||||
<figure id="PF" class="normal"><img src="icons/MPF.jpg" class="popup-ouverture-image" alt="Porte fenêtre 180x215" />
|
||||
<figcaption>Porte fenêtre<br>180x215cm</figcaption>
|
||||
</figure>
|
||||
<figure id="PG1" class="normal"><img src="icons/MPG1.jpg" class="popup-ouverture-image" alt="Porte de garage 240x200" />
|
||||
<figcaption>Porte garage<br>240x200cm</figcaption>
|
||||
</figure>
|
||||
<figure id="PG2" class="normal PG2"><img src="icons/MPG2.jpg" class="popup-ouverture-image" alt="Porte de garage renforcée 240x200" />
|
||||
<figcaption>Porte garage<br>renforcée</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<span class="popup-ouverture-texte">* Les éléments grisés ne sont pas disponibles pour des raisons de contrainte technique.</span>
|
||||
<div class="boutons-popup">
|
||||
<button type="button" class="btn btn-danger" id="popup-alerte-annuler">Annuler</button>
|
||||
</div>
|
||||
<input type="hidden" id="traveeSelectionnee">
|
||||
</div>
|
||||
|
||||
<div class="popup-ouverture" id="popup-ouverture-in">
|
||||
<span id="titre-popup">Quel type d'ouverture voulez-vous ajouter ?</span>
|
||||
<div class="container-images">
|
||||
<figure id="PE" class="normal"><img src="icons/MPE.jpg" class="popup-ouverture-image" alt="Porte de service 90x215" />
|
||||
<figcaption>Porte de service<br>90x215cm</figcaption>
|
||||
</figure>
|
||||
<figure id="PF" class="normal"><img src="icons/MPF.jpg" class="popup-ouverture-image" alt="Porte vitrée 180x215" />
|
||||
<figcaption>Porte vitrée<br>180x215cm</figcaption>
|
||||
</figure>
|
||||
<figure id="PO" class="normal"><img src="icons/MPI.jpg" class="popup-ouverture-image" alt="Portique intérieur" />
|
||||
<figcaption>Portique<br>intérieur</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<span class="popup-ouverture-texte">* Les éléments grisés ne sont pas disponibles pour des raisons de contrainte technique.</span>
|
||||
<div class="boutons-popup">
|
||||
<button type="button" class="btn btn-danger" id="popup-alerte-annuler">Annuler</button>
|
||||
</div>
|
||||
<input type="hidden" id="traveeSelectionnee">
|
||||
</div>
|
||||
|
||||
<div class="popup-ouverture" id="popup-plancher">
|
||||
<span id="titre-popup">Où souhaitez-vous positionner la trappe d'accès ?</span>
|
||||
<div class="container-images">
|
||||
<figure id="SOLP" class="normal"><img src="icons/SOLP.jpg" class="popup-ouverture-image" alt="Plancher plein" />
|
||||
<figcaption>Pas de trappe</figcaption>
|
||||
</figure>
|
||||
<figure id="SOLE_hg" class="normal"><img src="icons/SOLE_hg.jpg" class="popup-ouverture-image" alt="Ouverture haut gauche" />
|
||||
<figcaption>Trémie escalier<br>haut gauche</figcaption>
|
||||
</figure>
|
||||
<figure id="SOLE_hd" class="normal"><img src="icons/SOLE_hd.jpg" class="popup-ouverture-image" alt="Ouverture haut droite" />
|
||||
<figcaption>Trémie escalier<br>haut droite</figcaption>
|
||||
</figure>
|
||||
<figure id="SOLE_bg" class="normal"><img src="icons/SOLE_bg.jpg" class="popup-ouverture-image" alt="Ouverture bas gauche" />
|
||||
<figcaption>Trémie escalier<br>bas gauche</figcaption>
|
||||
</figure>
|
||||
<figure id="SOLE_bd" class="normal"><img src="icons/SOLE_bd.jpg" class="popup-ouverture-image" alt="Ouverture bas droite" />
|
||||
<figcaption>Trémie escalier<br>bas droite</figcaption>
|
||||
</figure>
|
||||
<figure id="SOLT_hc" class="normal"><img src="icons/SOLT_h.jpg" class="popup-ouverture-image" alt="Ouverture haut centré" />
|
||||
<figcaption>Trappe en haut</figcaption>
|
||||
</figure>
|
||||
<figure id="SOLT_bc" class="normal"><img src="icons/SOLT_b.jpg" class="popup-ouverture-image" alt="Ouverture bas centré" />
|
||||
<figcaption>Trappe en bas</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<br>
|
||||
<div class="boutons-popup">
|
||||
<button type="button" class="btn btn-danger" id="popup-alerte-annuler">Annuler</button>
|
||||
</div>
|
||||
<input type="hidden" id="traveeSelectionnee">
|
||||
</div>
|
||||
|
||||
<div class="popup-ouverture" id="popup-pignon">
|
||||
<span id="titre-popup">Quel type de pignon intérieur voulez-vous ajouter ?</span>
|
||||
<div class="container-images">
|
||||
<figure id="gauche" class="normal"><img src="icons/PINT_gauche.jpg" class="popup-ouverture-image" alt="Ouverture façade avant" />
|
||||
<figcaption>Ouverture vers<br>façade avant</figcaption>
|
||||
</figure>
|
||||
<figure id="droite" class="normal"><img src="icons/PINT_droite.jpg" class="popup-ouverture-image" alt="Ouverture façade arrière" />
|
||||
<figcaption>Ouverture vers<br>façade arrière</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="boutons-popup">
|
||||
<button type="button" class="btn btn-danger" id="popup-alerte-annuler">Annuler</button>
|
||||
</div>
|
||||
<input type="hidden" id="traveeSelectionnee">
|
||||
</div>
|
||||
|
||||
<div id="overlay"></div>
|
||||
|
||||
<div id="changement-vue">
|
||||
<div class="bouton-fleche" id="aerien" alt="Vue aérienne"><i class="fas fa-plane" data-toggle="tooltip" data-placement="top" title="Tooltip on top" id="bouton-vue-aerienne"></i></div>
|
||||
<div class="bouton-fleche" id="gauche" alt="Vue de gauche"><i class="fas fa-arrow-right"></i></div>
|
||||
<div class="bouton-fleche" id="dessus" alt="Vue de dessus"><i class="fas fa-arrow-down"></i></div>
|
||||
<div class="bouton-fleche" id="arriere" alt="Vue arrière"><i class="fas fa-arrow-left"></i></div>
|
||||
<div class="bouton-fleche" id="avant" alt="Vue avant"><i class="fas fa-arrow-right"></i></div>
|
||||
<div class="bouton-fleche" id="droite" alt="Vue de droite"><i class="fas fa-arrow-left"></i></div>
|
||||
<div id="perspective"><img src="icons/maison.png"></div>
|
||||
</div>
|
||||
|
||||
<div id="transparent-overlay"></div>
|
||||
<div id="vue-aerienne">
|
||||
<div id="legende">
|
||||
<span class="titre">Légende des modules</span></br>
|
||||
<div id="legende-modules">
|
||||
<span>MPL : Mur plein</span></br>
|
||||
<span>MPE : Porte d'entrée</span></br>
|
||||
<span>MF1 : Fenêtre 45x65</span></br>
|
||||
<span>MF2 : Fenêtre 105x115</span></br>
|
||||
<span>MPF : Porte fenêtre</span></br>
|
||||
<span>MPG1 : Porte de garage 240x200</span></br>
|
||||
<span>MPG2 : Porte garage renforcée</span></br>
|
||||
<span>MPEF : Porte d'entrée + fenêtre</span></br>
|
||||
<span>MPI : Portique intérieur</span></br>
|
||||
</div>
|
||||
</div>
|
||||
<div id="boutons">
|
||||
<button id="legende"></button>
|
||||
<button id="dezoom">-</button>
|
||||
<button id="zoom">+</button>
|
||||
</div>
|
||||
<div id="quitter-vue-aerienne">
|
||||
<span>Quittez le plan d'implantation</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="popup-attente">
|
||||
<div class="spinner-border text-success" role="status" id="popup-attente-icon">
|
||||
<span class="sr-only">Spinner</span>
|
||||
</div>
|
||||
<span class="texte-attente">Veuillez patienter :<br>nous sommes en train de préparer votre demande de prix...</span>
|
||||
</div>
|
||||
|
||||
<div id="popup-export">
|
||||
<span class="texte">Votre projet a été sauvegardé sous la référence <b>%s</b><br>
|
||||
<b>Conservez-la précieusement</b> car elle sera nécessaire pour revenir ultérieurement sur votre projet.<br><br>
|
||||
Nous allons enregistrer cette référence dans le presse-papiers de votre ordinateur :<br>cela vous permettra ensuite de la coller directement dans le document de votre choix.
|
||||
</span>
|
||||
<button type="button" class="btn btn-success" id="popup-export-button">Je copie cette référence dans mon presse-papiers</button>
|
||||
</div>
|
||||
|
||||
<div id="popup-decalage">
|
||||
<span class="texte">Vous souhaitez créer une nouvelle travée, et donc une nouvelle construction (nos constructions sont limitées à 4 travées maximum).<br><br>Dans quelle direction souhaitez-vous décaler cette nouvelle travée, par rapport à votre construction actuelle ?<br></span>
|
||||
<button type="button" class="btn btn-info" id="popup-decalage-arriere">Vers l'arrière</button>
|
||||
<button type="button" class="btn btn-info" id="popup-decalage-avant">Vers l'avant</button>
|
||||
<button type="button" class="btn btn-danger" id="popup-decalage-annuler">Annuler</button>
|
||||
</div>
|
||||
|
||||
</div> <!-- Fin du container -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user