<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta property="og:title" content="Oscar 3D" />
	<meta property="og:description" content="Un modèle anatomique (écorché) virtuel pour l'enseignement des SVT.">
	<meta name="google" content="notranslate">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=no" />
	<title>Oscar 3D</title>
	<link rel="icon" type="image/png" href="images/icones/favicon.png" />
	<script>
		// enlève le fbclid 
		let url=window.location.href;
		if (url.includes ("fbclid=")) {
			let tUrl=url.split("?");
			let url1=tUrl[0];
			let url2=tUrl[1];
			let tUrl2=url2.split("&");
			tUrl2=tUrl2.filter(c=>!c.includes("fbclid="));
			url2=tUrl2.join("&");
			if (url2=="") {
				url=url1;
			} else {
				url=url1+"?"+url2;
			}
			window.location.href = url;
		}
	</script>
	
	 <script type="importmap">
		{
			"imports": {
				"three": "./js/three/three.module.js",
				"three/addons/": "./js/three/examples/jsm/"
			}
		}
	</script>
	
	<script src="js/three/threeImporter.js" type="module"> </script>
	
	<script type="text/javascript" src="js/jszip.min.js"></script>
	<script type="text/javascript" src="js/demarrage.js"></script>
	<script type="text/javascript" src="js/appareils.js"></script>
	<script type="text/javascript" src="js/legendes.js"></script>
	<script type="text/javascript" src="js/loadersAppareils.js"></script>
	<script type="text/javascript" src="js/slicer.js"></script>
	<script type="text/javascript" src="js/recherche.js"></script>
	<script type="text/javascript" src="js/dictionnaire.js"></script>
	<script type="text/javascript" src="js/themes.js"></script>
	<script type="text/javascript" src="js/viewModele.js"></script>
	<script type="text/javascript" src="js/mainLoop.js"></script>
	<script type="text/javascript" src="js/easter.js"></script>
	<script type="text/javascript" src="js/mouseActions.js"></script>
	<script type="text/javascript" src="js/webGl.js"></script>	
	<link rel="stylesheet" href="css/style.css">
</head>

<body onload="start()" style="display:none" class="noselect" onmouseleave ="ctxMouseOut()"
	oncontextmenu="contextMenu(event)" ontouchstart="bodyTouchStart()"
	onkeydown="keyDown(event)" onkeyup="keyUp(event)" onmousedown="bodyMouseDown(event)">
	<div id="divGauche"><div style="padding:1em" >
		<h1 id="h1Titre">Oscar 3D</h1>
		<br>
		<div id="divFullScreen" title="Basculer en plein écran" onclick="toggleFullScreen()"></div>
		<div>
			<h2 style="display:inline-block">Sexe : </h2>
			<div id="divSexeM" onclick="changeSexe('M')" oncontextmenu="changeSexe('M');setOnlyAppareil('reproducteur')"></div>
			<div id="divSexeF" onclick="changeSexe('F')" oncontextmenu="changeSexe('F');setOnlyAppareil('reproducteur')"></div>
			<br>
		</div>
		<hr>
		<h2>Appareils affichés</h2>
		<div id="divConsigneApp" class="consigne">
			<p><span id="divTactile10">Clic gauche</span> sur le bouton d'un appareil pour l'afficher ou le masquer.</p>
			<p>Un <span id="divTactile11">clic droit</span> sur le bouton d'un appareil restreindra l'affichage à cet unique appareil.</p>
		</div>
		<p><b>Appareil locomoteur :</b></p>
		<div id="boutonSquelette" class="bouton" onclick="toggleAppareil('squelette')" oncontextmenu="setOnlyAppareil('squelette')"
			onmouseover="dicoAppareil('squelette')" onmouseout="hideDico()">
			<div class="texte-bouton">Squelette</div>
			<div id="oeilSquelette" class="oeil"></div>
		</div>
		<div id="boutonMuscles" class="bouton" onclick="toggleAppareil('muscles')" oncontextmenu="setOnlyAppareil('muscles')"
			onmouseover="dicoAppareil('muscles')" onmouseout="hideDico()">
			<div class="texte-bouton">Muscles</div>
			<div id="oeilMuscles" class="oeil"></div>
		</div>
		<div id="boutonNerveux" class="bouton" onclick="toggleAppareil('nerveux')" oncontextmenu="setOnlyAppareil('nerveux')"
			onmouseover="dicoAppareil('nerveux')" onmouseout="hideDico()">
			<div class="texte-bouton">Système nerveux</div>
			<div id="oeilNerveux" class="oeil"></div>
		</div>
		<hr>
		<p><b>Autres appareils :</b></p>
		<div id="boutonCirculatoire" class="bouton" onclick="toggleAppareil('circulatoire')" oncontextmenu="setOnlyAppareil('circulatoire')"
			onmouseover="dicoAppareil('circulatoire')" onmouseout="hideDico()">
			<div class="texte-bouton">Circulatoire</div>
			<div id="oeilCirculatoire" class="oeil"></div>
		</div>
		<div id="boutonReproducteur" class="bouton" onclick="toggleAppareil('reproducteur')" oncontextmenu="setOnlyAppareil('reproducteur')"
			onmouseover="dicoAppareil('reproducteur')" onmouseout="hideDico()">
			<div class="texte-bouton">Reproducteur</div>
			<div id="oeilReproducteur" class="oeil"></div>
		</div>
		<div id="boutonLymphatique" class="bouton" onclick="toggleAppareil('lymphatique')" oncontextmenu="setOnlyAppareil('lymphatique')"
			onmouseover="dicoAppareil('lymphatique')" onmouseout="hideDico()">
			<div class="texte-bouton">Immunitaire/lymphatique</div>
			<div id="oeilLymphatique" class="oeil"></div>
		</div>
		<div id="boutonRespiratoire" class="bouton" onclick="toggleAppareil('respiratoire')" oncontextmenu="setOnlyAppareil('respiratoire')"
			onmouseover="dicoAppareil('respiratoire')" onmouseout="hideDico()">
			<div class="texte-bouton">Respiratoire</div>
			<div id="oeilRespiratoire" class="oeil"></div>
		</div>
		<div id="boutonDigestif" class="bouton" onclick="toggleAppareil('digestif')" oncontextmenu="setOnlyAppareil('digestif')"
			onmouseover="dicoAppareil('digestif')" onmouseout="hideDico()">
			<div class="texte-bouton">Digestif</div>
			<div id="oeilDigestif" class="oeil"></div>
		</div>
		<div id="boutonExcreteur" class="bouton" onclick="toggleAppareil('excreteur')" oncontextmenu="setOnlyAppareil('excreteur')"
			onmouseover="dicoAppareil('excreteur')" onmouseout="hideDico()">
			<div class="texte-bouton">Excréteur</div>
			<div id="oeilExcreteur" class="oeil"></div>
		</div>
		<div id="boutonEndocrinien" class="bouton" onclick="toggleAppareil('endocrinien')" oncontextmenu="setOnlyAppareil('endocrinien')"
			onmouseover="dicoAppareil('endocrinien')" onmouseout="hideDico()">
			<div class="texte-bouton">Endocrinien</div>
			<div id="oeilEndocrinien" class="oeil"></div>
		</div>
		<hr>
		<div id="boutonToutAfficher" class="bouton" onclick="showAll()">
			<div class="texte-bouton2"><b>Afficher</b> tous les appareils</div>
		</div>
		<div id="boutonReinit" class="bouton" onclick="resetModele()">
			<div class="texte-bouton2"><b>Réinitialiser</b> le modèle</div>
		</div>
	</div></div> <!-- divGauche -->
	
	<div id="divCentre">
		<div id="divGl" 
			onwheel="moletteGl(event)" onmouseout="mouseOutGl(event)" onmouseup="mouseUpGl(event)" onmousedown="mouseDownGl(event)" onmousemove="mouseMoveGl(event)"
			ontouchstart="touchStart(event)" ontouchmove="touchMove(event)" ontouchend="touchEnd(event)" ontouchcancel ="touchCancel(event)"
			ondblclick="doubleClick(event)"
		>
		</div>
		<canvas id="canvLeg" style="position:absolute;top:0;height:0;pointer-events:none"></canvas>
		<div id="divContLeg" style="position:absolute;top:0;height:0;width:100%;height:100%;pointer-events:none"></div>
		<div id="divAuteur">
			Oscar3D CC BY-NC-SA P.COSENTINO<br>
			<span onclick="divSources.style.display='block'" style="cursor:pointer"><u>Origine des modèles</u></span>
		</div>
		<div id="divStopPivot" onclick="stopPivot()">
			Cesser de pivoter librement
		</div>
		<div id="divEncart"></div>
		<div id="divDico">Bla bla bla</div>
	</div> <!-- divCentre -->
	
	<div id="divDroite"><div style="padding:1em" >
		<div id="divVersion">v <span id="spanVersion">0.1</span> &nbsp;&nbsp;&nbsp; <span onclick="divSources.style.display='block'" style="cursor:pointer">Informations légales</span></div>
		<div id="divSelectionTheme">
			<h2>Recherche</h2>
			<br>
			<input id="inputTextRecherche" type="text" style="padding:0.25em;border-radius:0.3em;width:calc(100% - 3em);" value="(saisir le nom d'un organe)" oninput="searchInput()" onclick="searchOrganClick()">
			<div class="iconeCroix" onclick="clearSearch()"></div>
			<hr>
			<h2>Sélection thématique<div id="divShareThemeIcon" onclick="shareTheme()"></div></h2>
			<br>
			<div id="divSelectTheme"  class="disabled">
				<select id="selectTheme" onchange="doSelectTheme(this.value)"
					style="padding:0.25em;border-radius:0.3em;width:calc(100% - 2em);">
					<option value="patience" selected>Veuillez patienter, chargement</option>
					<option value="none">Aucun thème</option>
					<option value="coude">Articulation du coude</option>
					<option value="audition">Audition</option>
					<option value="double">Double circulation</option>
					<option value="stress">Contrôle du stress</option>
					<option value="reproduction">Fonction de reproduction</option>
					<option value="sens">Fonctions sensorielles</option>
					<option value="lympho">Organes lymphoïdes I/II</option>
					<option value="reflexea">Réflexe achilléen</option>
					<option value="glycemie">Régulation de la glycémie</option>
					<option value="respiration">Respiration / ventilation</option>
					<option value="plaisir">Sexualité et plaisir</option>
					<option value="sncp">Sys. nerv. central vs periph.</option>
					<option value="larynge">Trajet du nerf laryngé</option>
					<option value="tube">Tube digestif</option>
					<option value="vision">Vision</option>
				</select>
				<div class="iconeCroix" onclick="selectTheme.value='none';doSelectTheme('none')"></div>
			</div>
		</div>
		<hr>
		<div id="divPlanDeCoupe" class="disabled">
		<h2>Plan de coupe</h2>
			<br>
			<div id="boutonPlanAucun" class="bouton" style="outline:3px solid black" onclick="selectPlan('aucun')">
				<div class="texte-bouton2">Aucun (pas de coupe)</div>
			</div>
			<div id="boutonPlanSagittal" class="bouton" onclick="selectPlan('sagittal')">
				<div class="texte-bouton2">Coupe sagittale</div>
			</div>
			<div id="boutonPlanCoronal" class="bouton" onclick="selectPlan('coronal')">
				<div class="texte-bouton2">Coupe frontale (coronale)</div>
			</div>
			<div id="boutonPlanAxial" class="bouton" onclick="selectPlan('axial')">
				<div class="texte-bouton2">Coupe transversale (axiale)</div>
			</div>
		</div>
		<div id="divPositionPlan" class="disabled">
			<p><b>Position du plan de coupe :</b></p>
			<input id="rangePlan" type="range" style="width:100%" min="-1" max="1" step="any" oninput="changeRangePlan()">
		</div>
		<hr>
		<h2>Mode d'emploi</h2>
		<div class="consigne">
			<p id="divTactile20">Utiliser la souris pour déplacer / faire pivoter le modèle. La molette permet de zoomer.</p>
			<p id="divTactile21">Survoler un organe pour faire apparaître son nom.</p>
			<p><span id="divTactile22">Clic droit</span> sur un organe pour des actions contextuelles.</p>
			<p>Double cliquer sur un organe pour lui assigner une annotation.</p>
			<p><span id="divTactile23">Clic droit</span> sur une annotation pour la supprimer.</p>			
		</div>
		<div id="boutonModeDemploi" class="bouton" onclick="afficheModeDemploi()">
			<div class="texte-bouton2">Mode d'emploi détaillé</div>
		</div>
	</div></div> <!-- divDroite -->
	
	<div id="divCtxMenu" class="ctxMenu ombre" onmousedown="event.stopPropagation()" onmousemove="event.stopPropagation()">
		<div id="divCtxMenuTitre">Fémur</div>
		<div id="ctxHr1"><hr></div>
		<div id="divCtxMenuEaster">Bonne année !</div>
		<div class="ctxMenuElem" style="pointer-events:none" id="ctxConsignes"><i>Faire un clic droit <b>sur un organe</b><br>pour des actions contextuelles.</i></div>
		<div class="ctxMenuElem" id="ctxMask" onclick="hideObjDroit()"><b>Masquer</b> cet organe</div>
		<div class="ctxMenuElem" id="ctxTransp" onclick="transpObjDroit()"><b>Rendre transparent</b> cet organe</div>
		<div class="ctxMenuElem" id="ctxTranspSauf" onclick="rendTousMatTranspSaufDroit(0.1)">Tout <b>transp.</b> sauf cet organe</div>
		<div class="ctxMenuElem" id="ctxPivot" onclick="setPivotDroit()"><b>Pivoter autour</b> de cet organe</div>
		<div class="ctxMenuElem" id="ctxStopPivot" onclick="stopPivot()"><b>Cesser de pivoter</b> librement</div>
		<div class="ctxMenuElem" id="ctxRestoreOpa" onclick="restoreOpaMatObjDroit()"><b>Restorer l'opacité</b> de cet organe</div>
		<div class="ctxMenuElem" id="ctxIsole" onclick="isoleObjDroit()"><b>Tout masquer sauf</b> cet organe</div>
		<div class="ctxMenuElem" id="ctxAnnote" onclick="addLegendeDroit()"><b>Annoter</b> cet organe</div>
		<div class="ctxMenuElem" id="ctxVoirScan" onclick="enterModelMode()">💀 <b>Voir</b> un scan réel</div>
		<div class="ctxMenuElem" id="ctxVoirMicro" onclick="openSlide()">🔬 <b>Voir</b> une coupe d'aorte</div>
		<div><hr></div>
		<div class="ctxMenuElem" id="ctxRevele" onclick="unmaskAll()"><b>Révéler tous</b> les organes masqués</div>
		<div class="ctxMenuElem" id="ctxAfficheAll" onclick="showAll()"><b>Afficher tous</b> les appareils</div>
		<div class="ctxMenuElem" id="ctxEffLegendes" onclick="removeAllLegendes()"><b>Effacer</b> toutes les annotations</div>
		<div id="ctxHr2"><hr></div>
		<div class="ctxMenuElem" id="ctxResetModele" onclick="resetModele()"><b>Réinitialiser</b> le modèle</div>
		<div class="ctxMenuElem" id="ctxReset" onclick="location.reload()"><b>Recharger</b> l'application</div>
	</div>
	
	<div id="divInfoBulle">XXX</div>
	<div id="divVideo"  onclick="stopVideo()">
		<video id="videoOscar"><source src="" type="video/mp4" /></video>
	</div>
	
	<div id="divAvertissementTactile" class="fondModal">
		<div style="position:absolute;width:20em;height:11em;border:1px solid black;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;
			font-size:3em;text-align:center;padding:1em;box-shadow: 0.5em 0.5em 2em black;">
			<p><b>Avertissement :</b></p>
			<p>Cette application ne prend pas en charge (pour l'instant) le tactile, et nécessite l'emploi d'une souris avec molette.</p>
			<p>De plus, elle n'est pas adapté à un usage sur téléphone. Veuillez utiliser un PC.</p>
		</div>
	</div>
	<div id="divSources" class="fondModal">
		<div style="position:absolute;width:40em;height:31em;border:1px solid black;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;
			text-align:left;padding:1em;box-shadow: 0.5em 0.5em 2em black;pointer-events:auto">
			<div style="overflow-y: auto;height:calc(100% - 3em)">
				<h1>Informations légales</h1>
				<p>Cette application, écrite par Philippe Cosentino, est hébergée sur des serveurs français (OVH, serveurs académiques), n'utilise pas de cookies, et ne collecte pas d'informations personnelles.</p>
				<hr>
				<h1>Origine des modèles</h1>
				<p>De nombreux modèles (squelette, muscles, vaisseaux sanguins, etc.) proviennent de <a href='https://github.com/Z-Anatomy/The-blend' target='_blank'>Z-Anatomy (Gauthier Kervyn)</a> et sont sous licence CC BY-SA 4.0.</p>
				<p>Sans ces modèles, Oscar3D n'aurait jamais pu voir le jour.</p>
				<p>L'appareil lymphatique, glandes mammaires, complexe hypothalamo-hypophysaire, nerf pharyngé, ATV, noyaux accumbens, amygdales pharyngiennes ... ont été modélisés par Philippe Cosentino, à partir de sources diverses.</p>
				<p>Les appareils génitaux (masculin et féminin) et lymphatiques ont été modélisés par Philippe Cosentino. Le clitoris a été modélisé par Philippe Cosentino, en association avec Odile Fillod, conformément aux consignes et schémas précisément cotés qu'elle lui a fournis.</p>
				<p>Les incisives et canines maxillaires ont été modélisées et adaptées par Philippe Cosentino, à partir du modèle réalisé par University of Dundee, School of Dentistry (CC BY).</p>
				<p>Enfin, certains organes ont été entièrement remodelés ou dotés de textures par Philippe Cosentino, comme le pancréas, la langue ou les glandes parotides par exemple.</p>
				<p id="divEaster"></p>
				<div id="divPartenariatHisto">
					<hr>
					<h1>Origine des lames histologiques</h1>
					<p>Un partenariat a été conclu avec le Dr Jean-Marie Ramirez, enseignant chercheur, auteur d'un <a href=https://histologielv.umontpellier.fr/>site d'histologie</a> regroupant des lames de tissus humains sains et pathologiques.</p>
					<p>Lorsque cela est possible, un clic droit sur un tissu proposera, via un "lien externe" signalé par une icône de microscope, de visionner la lame numérisée de ce tissu ou organe sur ce site.</p>
				</div>
				
				<hr>
				<h1>Ajustement des modèles</h1>
				<p>Les modèles issus du travail de Gauthier Kervyn (squelette, muscles, vaisseaux, nerfs, ligaments) ont été modifiés par Philippe Cosentino afin qu'ils soient adaptés aux morphologies (au niveau du bassin) féminines ou masculines.</p>
				<p>La géométrie de tous les modèles a été remaillée ou décimée (d'un facteur allant de 10 à 100x), afin de réduire le nombre de polygones, et ainsi l'occupation de la mémoire.</p>
				<p>Certains organes ont été corrigés ou déplacés : les incisives mandibulaires ont été redressées, les ganglions spinaux déplacés vers les racines dorsales, les amygdales palatines ont été déplacées au bon endroit, les bronches principales ont été dotées d'anneaux cartilagineux.</p>
				<p>D'autres organes ont été légèrement déformés ou déplacés afin d'éviter les collisions.</p>
				<p>Je remercie le Dr Jean-Marie Ramirez, , enseignant chercheur, ainsi que Cyril Vidal, et Léa Graveline chirurgiens dentistes pour leurs conseils et suggestions de correction.</p>
				<hr>
				<h1>Origine des textes</h1>
				<p>Les textes décrivant la structure et la fonction des organes on tous été rédigés par Philippe Cosentino. Le nom de chaque organe a été vérifié et traduit, mais il est possible que des oublis ou erreurs susbistent.</p>
		
				<hr>
				<h1>Contact</h1>
				<p>En cas d'erreur, de problème de licence ou autre, veuillez contacter l'auteur : cosentino.philippe@gmail.com</p>
			</div>
			<div style="position:absolute;bottom:1em;width:calc(100% - 2em)">
				<div  class="bouton3" onclick="divSources.style.display='none'">
					<div class="texte-bouton">OK</div>
				</div>
			</div>
		</div>		
	</div>
	
	
	<div id="divModeDemploi" class="fondModal">
		<div style="position:absolute;width:40em;height:31em;border:1px solid black;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;
			text-align:left;padding:1em;box-shadow: 0.5em 0.5em 2em black;pointer-events:auto">
			<div style="overflow-y: auto;height:calc(100% - 3em)">
				<h1>Mode d'emploi détaillé</h1>
				<br>
				<p><b>Manipulation du modèle dans l'espace</b></p>
				<p id="divTactile1">Le modèle se manipule en déplaçant la souris tout en maintenant le bouton gauche enfoncé. Les mouvements de la souris de gauche à droite font pivoter le modèle autour de son axe vertical, tandis que les mouvements de haut en bas le déplacent le long de cet axe.<br>La molette de la souris permet de se rapprocher ou de s'éloigner du modèle (zoom/dézoom).</p>
				<p id="divTactile2">Il est possible de faire tourner librement le modèle en cliquant avec le bouton droit de la souris sur un organe qui servira de "pivot", puis en choisissant "Pivoter autour de cet organe" dans le menu contextuel. Un nouveau clic droit permettra de mettre fin à ce mode en choisissant "Cesser de pivoter librement".</p>
				<br>
				<p><b>Affichage/masquage des appareils</b></p>
				<p>Chaque appareil peut être masqué ou révélé en cliquant sur le bouton correspondant. Un oeil ouvert ou barré indique si l'appareil est actuellement visible ou caché.<br>
				<span id="divTactile3">Un clic droit sur le bouton d'un appareil masquera tous les autres appareils, ce qui permet de limiter l'affichage à un seul appareil en un seul clic.</span><br>
				Le bouton "Afficher tous les appareils" permet de rendre visibles tous les appareils. Le bouton "Réinitialiser le modèle" rétablira également la visibilité de tous les organes masqués ou rendus transparents.</p>
				<br>
				<p><b>Choix du sexe biologique</b></p>
				<p>En cliquant sur les symboles masculin (♂) ou féminin (♀) en haut à gauche de l'écran, il est possible d'adapter le modèle anatomique (partiellement, des erreurs subsisteront forcément pour maintenir la topologie avec le reste des systèmes) selon le sexe biologique, notamment au niveau du bassin et de la poitrine.
				<br><span id="divTactile4">A noter qu'un clic droit sur un de ces symboles reviendra à limiter l'affichage à l'appareil reproducteur correspondant.</span></p>
				<br>
				<p><b>Accès aux structures profondes</b></p>
				<p>Il est possible de retirer (masquer) temporairement un organe via le menu contextuel (clic droit puis "Masquer cet organe")<span id="divTactile5"> ou en maintenant la touche Maj du clavier enfoncé tout en cliquant avec le bouton gauche de la souris</span>. Les organes masqués peuvent à nouveau être révélés via le menu contextuel ou en réinitialisant le modèle.</p>
				<br>	
				<p><b>Sélection d'un ensemble d'organes ou de tissus</b></p>
				<p>Certains organes sont organisés de manière hiérarchique : une canine par exemple, appartient à l'ensemble plus vaste des "dents" qui appartiennent à un ensemble plus vaste : le "crâne". Cette organisation est matérialisée par un arbre qui apparaît alors tout en haut du menu contextuel. En cliquant sur un niveau de cet arbre, il est possible de sélectionner un ensemble plus vaste. Si par exemple on clique (<span id="divTactile6">avec le bouton droit</span>) sur une canine, il est possible de sélectionner "Dents" et ainsi d'agir sur toutes les dents en même temps (pour les masquer par exemple).</p>
				<br>	
				<p><b>Recherche</b></p>
				<p>Il est possible de rechercher un organe par son nom, en tapant tout ou partie de celui-ci dans le champ de recherche situé en haut à droite de l'écran. Le ou les organe(s) correspondant à la recherche apparaîtront alors en surbrillance, même s'ils sont enfouis sous d'autres tissus.</p>
				<br>	
				<p><b>Sélection thématique</b></p>
				<p>Le menu déroulant "Sélection thématique" permet de travailler sur une sélection restreinte d'organes et de tissus, parfois colorés ou rendus transparents pour une meilleure lisibilité. Une légende affichées dans un cartouche en bas à gauche du modèle accompagne certains thèmes.
				<br>Pour quitter un thème, il suffit de réinitialiser le modèle ou de choisir "Aucun thème" dans le menu déroulant.</p>
				<br>
				<p><b>Plan de coupe</b></p>
				<p>Oscar 3D permet de réaliser une coupe selon un plan parmi 3 au choix : plan sagittal (c'est le plan de symétrie du corps humain), plan frontal (ou coronal), plan transversal (ou axial). Pour cela il suffit de cliquer sur le bouton correspondant, et, éventuellement, de déplacer le plan de coupe à l'aide du curseur "Position du plan de coupe".
				<br>Pour quitter le mode "coupe", il suffit de cliquer sur le bouton "Aucun (pas de coupe)".</p>
				<br>
				<p><b>Annotations</b></p>
				<p>Il est possible d'annoter un organe en double cliquant dessus. Un trait de légende sera alors tiré à partir de cet organe jusqu'à la "marge" de la zone centrale de l'écran, où le nom de l'organe apparaîtra.
				<br>A noter : si le point de départ du trait de légende n'est plus dans le champ de la caméra (par exemple s'il se retrouve derrière le modèle), l'annotation disparaît.
				<br>Pour supprimer une annotation, il suffit de réaliser un <span id="divTactile7">clic droit</span> sur celle-ci.</p>
				<br>
				<p><b>Affichage de modèles 3D spécifiques</b></p>
				<p>Dans certains cas, le menu contextuel propose d'afficher des modèles 3D (scans 3D, modèles détaillés etc.) récupérés à partir de sources externes (dans le respect des licences de ces modèles bien entendu). C'est le cas par exemple lorsque l'on réalise un clic droit sur le crâne : une ligne "Voir un hémicrâne (scan réel)" apparaît alors dans le menu contextuel et donne accès à un scan 3D réalisé sur un hémicrâne humain (réel).
				<br>Pour quitter ce mode et revenir à Oscar 3D, il suffit de cliquer sur le bouton "Fermer ce modèle".</p>
				<br>
				<p><b>Affichage de lames histologiques</b></p>
				<p>Un partenariat a été conclu avec le Dr Jean-Marie Ramirez, auteur d'un site d'histologie regroupant des dizaines de lames scannées. Dans certains cas, une option signalée par une icône de microscope rouge apparaîtra dans le menu contextuel, et ouvrira (si on clique dessus) la page correspondant à la lame scannée dans un nouvel onglet du navigateur.
				<br>Cette fonctionnalité n'est pas disponible dans la version exécutable d'Oscar 3D.</p>
				
				
			</div>
			<div style="position:absolute;bottom:1em;width:calc(100% - 2em)">
				<div  class="bouton3" onclick="divModeDemploi.style.display='none'">
					<div class="texte-bouton">OK</div>
				</div>
			</div>
		</div>		
	</div>
	
	<div id="divQuestion" class="fondModal">
		<div style="position:absolute;width:30em;height:auto;border:1px solid black;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;
			text-align:left;padding:1.5em;box-shadow: 0.5em 0.5em 2em black;font-size:1.2em">
			<center><h1>Question</h1></center>
			<div id="divContenuQuestion">
			</div>
			<div style="width:100%;text-align:center">
				<div  class="bouton4" onclick="repondOui()">Oui</div>
				<div  class="bouton4" onclick="repondNon()">Non</div>
			</div>
		</div>
	</div>
	
	<div id="divPartage" class="fondModal">
		<div style="position:absolute;width:30em;height:auto;border:1px solid black;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;
			text-align:left;padding:1.5em;box-shadow: 0.5em 0.5em 2em black;font-size:1.2em">
			<center><h1>Partager un thème via un lien</h1></center>
			<br><br>
			<p>
				L'URL ci-dessous ouvrira directement Oscar3D avec ce thème :
			</p>
			<p style="text-align:center" class="selectallowed">
				<a id="aURLPartage" target="_blank"><span id="spanURLPartage">....</a></span>
			</p>
			<div style="width:100%;text-align:center">
				<div  class="bouton4" onclick="divPartage.style.display='none'">OK</div>
			</div>
		</div>
	</div>
	
	<div id="divModeleCont" class="fondModal">
		<div id="divModele" style="position:absolute;width:min(85vh , 85vw);height:calc(min(85vh , 85vw) + 3.5em);
			border:1px solid black;top:50%;left:50%;transform:translate(-50%,-50%);background-color:white;
			box-shadow: 0.5em 0.5em 2em black;font-size:1.2em">
			<div id="divModeleGl" style="position:absolute;top:0;width:100%;aspect-ratio: 1 / 1">
			
			</div>
			<div style="position:absolute;bottom:0.5em;left:1em;width:calc(100% - 2em)">
				<div  class="bouton3" onclick="exitModelMode()">
					<div class="texte-bouton">Fermer ce modèle</div>
				</div>
			</div>
			<div id="divAuteurModele" style="position:absolute;bottom:4em;right:2em;font-style:italic;opacity:0.5">
				CC BY-NC Auteur
			</div>
			<div id="divTitreModele" style="position:absolute;top:1em;right:2em;font-style:italic;opacity:0.5">
				Titre
			</div>
		</div>
	</div>
	
	<div id="divSplashCont" class="fondModal" style="display:block">
		<div id="divSplash" style="position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);text-align:center">
			<div>
				<img src="images/splash.jpg" style="width:50vmin;height:50vmin;"><br>
				<div style="font-size:4em;font-weight:bold">Oscar 3D</div>
				<div style="font-size:2em;font-style:italic">Veuillez patienter<br>pendant le chargement du modèle</div>
				<br>
				<center>
				<div id="divBarreVerte" style="display:inline-block;width:40%;height:1em;background-color:#0F0;border:1px solid black;margin:0"></div><div id="divBarreGrise" style="display:inline-block;width:40%;height:1em;background-color:#eee;border:1px solid black;border-left:0;margin:0"></div>
				</center>
			</div>
		</div>
	</div>
</body>
</html>