18015 sujets

Questions générales et questions de débutants

[Résolu] Aide ton ami Muelsan à récupérer le code (codepen)

Je suis graphiste et je voudrais insérer un code que j'ai trouvé sur codepen.
Ne me conspuez pas amis développeurs.Si cela vous semble facile, pour moi c'est aussi difficile que de trouver la théorie du tout aidé d'un simple livre de math de 5ième et de mon petit neveu borgne de 3ans.

la question est simple.Comment insérer cet objet dans mon site web ?
http://codepen.io/nexxos/pen/Kphkq

évidement j'ai déjà créé une page html ou j y ai mi le contenu et ensuite lié la feuille de style et le js à cette dernière.

Peu être faut il rajouter à cela une librairie tel que three.js ? (déjà essayé sans succès aucun.)

merci de vos fructueuses réponses.
salut,
le code utilise juste PrefixFree (que tu as ici) qui est en plus un plugin JQuery ! Si tu as un navigateur récent et que tu veux juste tester, tu n'as qu'à supprimer "PrefixFree.prefixCSS(" et la parenthèse ");" juste avant "return face;".
merci Zelalsan je viens d'essayer.L'objet en 3D ne s'affiche toujours pas.
voici mon code si ça peu aider.


<!-- xxxxxxxxxxxxxxxxxxxx CORPS DE LA PAGE xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
<input id="box-toggle" type="checkbox">
<label for="box-toggle">Geometrie anzeigen (Drahtgitter)</label>


<!-- xxxxxxxxxxxxxxxxxxxx JAVASCRIPT xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
<script src="js/threedee.js"></script>  
<script src="js/three.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>



("threedee.js" c est le js de codepen.)

j'ai aussi fait un test en suppriment PrefixFree comme tu me la suggéré.

j'offre une croisière dans les caraibes à celui qui trouve ! Smiley biggrin
Ça marche parfaitement chez moi (et si ça le fera chez toi je veux ma croisière ! Smiley langue )

<!DOCTYPE html> 
<!-- saved from url=(0014)about:internet -->
<html lang="fr-FR">
	<head>
		<meta charset="utf-8" />
		<title>Titre de la page</title>
		<style type="text/css">
			html, body {
  			height: 100%;
			}
			body {
  			font: 12px/1.2 Arial;
  			perspective: 800px;
  			perspective: 600px;
  			background: #666;
  			background: linear-gradient(#222,#222,#864);
  			color: #fff;
  			text-align:center;
			}
			.dreiDObjekt {
  			position: absolute;
  			left: 50%;
  			top: 60%;
  			transform-style: preserve-3d;
			transform-origin: 50% 50% 50%;
  			backface-visibility: hidden;
			}
			.assembly {
  			animation: spin 6s linear infinite;
			}
			#box-toggle:checked ~ .assembly .face {
  			outline: 1px solid #000;
  			background: #fff !important;
  			backface-visibility: visible;
			}
			@keyframes spin {
  			to {
    			transform: rotateY(360deg) rotateZ(360deg) rotateX(360deg);
  			}
			}			
		</style>
	</head>	
	<body>
		<input id="box-toggle" type="checkbox">
		<label for="box-toggle">Geometrie anzeigen (Drahtgitter)</label>
		<script type="text/javascript">
			var DRUM_TEXTURE = "http://nexxos.de/lab/webgl/img/textur-dose-rekener-sommer-001.png";

			// Assembiles are for grouping faces and other assembiles
			function createAssembly() {
    			var assembly = document.createElement("div");
    			assembly.className = "dreiDObjekt assembly";
    			return assembly;
			}

			function createFace(w, h, x, y, z, rx, ry, rz, tsrc, tx, ty) {
    			var face = document.createElement("div");
				face.className = "dreiDObjekt face";
    			face.style.cssText = 
        			"background: url(" + tsrc + ") -" + tx.toFixed(2) + "px " + ty.toFixed(2) + "px;" +
        			"width:" + w.toFixed(2) + "px;" +
        			"height:" + h.toFixed(2) + "px;" +
        			"margin-top: -" + (h / 2).toFixed(2) + "px;" +
        			"margin-left: -" + (w / 2).toFixed(2) + "px;" +
        			"transform: translate3d(" + x.toFixed(2) + "px," + y.toFixed(2) + "px," + z.toFixed(2) + "px)" +
        			"rotateX(" + rx.toFixed(2) + "rad) rotateY(" + ry.toFixed(2) + "rad) rotateY(" + rz.toFixed(2) + "rad);";
    			return face;
			}

			function createTube(dia, height, sides, texture) {
    			var tube = createAssembly();
    			var sideAngle = (Math.PI / sides) * 2;
    			var sideLen = dia * Math.tan(Math.PI/sides);
    			for (var c = 0; c < sides; c++) {
        			var x = Math.sin(sideAngle * c) * dia / 2;
        			var z = Math.cos(sideAngle * c) * dia / 2;
        			var ry = Math.atan2(x, z);
        			tube.appendChild(createFace(sideLen + 1, height, x, 0, z, 0, ry, 0, texture, sideLen * c, 0));
    			}
    			return tube;
			}

			function createBarrel() {
    			var barrel = createTube(100, 196, 48, DRUM_TEXTURE); // Durchmesser, Höhe, Facetten, mehr Facetten reduzieren Texturunschärfe
			  
    			barrel.appendChild(createFace(100, 100, 0, -98, 0, Math.PI / 2, 0, 0, DRUM_TEXTURE, 0, 100)); // Deckel 1
			  
    			barrel.appendChild(createFace(100, 100, 0, 98, 0, -Math.PI / 2, 0, 0, DRUM_TEXTURE, 0, 100)); // Deckel 2
			  
    			return barrel;
			}

			document.body.appendChild(createBarrel());
		</script>
	</body>
</html>
hé mec tu sais que je t'adore ! (même si tu as un peu copié mon pseudo mais personne n'est parfait Smiley cligne )

sa fonctionne très bien.
fais tes valises tu pars demain pour les caraïbes Smiley biggrin
loool exact je viens de remarquer ! Par contre moi ce n'est pas un pseudo, c'est un prénom qui existe et qui a un sens.
Pour le billet j'attends que tu me le fax, contacte-moi en mp.
Sujet clos
Aller à