javascript

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

create 3d barrel using javascript

3796

Show ResultJAVASCRIPT

// inspirated by Ken Clark - https://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/

<!DOCTYPE HTML>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script>

function createAssembly() {
var assembly = document.createElement("div");
assembly.className = "threedee assembly";
return assembly;
}

function createFace(w, h, x, y, z, rx, ry, rz, tsrc, tx, ty) {
var face = document.createElement("div");
face.className = "threedee face";
face.style.cssText = PrefixFree.prefixCSS(
"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 DRUM_TEXTURE = "https://keithclark.co.uk/labs/css-fps/drum2.png";
var barrel = createTube(100, 196, 20, DRUM_TEXTURE);
barrel.appendChild(createFace(100, 100, 0, -98, 0, Math.PI / 2, 0, 0, DRUM_TEXTURE, 0, 100));
barrel.appendChild(createFace(100, 100, 0, 98, 0, -Math.PI / 2, 0, 0, DRUM_TEXTURE, 0, 100));
return barrel;
}

addEventListener("mousemove", function(evt) {
var x = document.getElementsByTagName("div")[0];
var mouse_x = evt.pageX;
var mouse_y = evt.pageY;
x.style.transform = 'rotateX(' + -mouse_y + 'deg)' + 'rotateY(' + mouse_x + 'deg)';
x.style.msTransform = 'rotateX(' + -mouse_y + 'deg)' + 'rotateY(' + mouse_x + 'deg)';
x.style.WebkitTransform = 'rotateX(' + -mouse_y + 'deg)' + 'rotateY(' + mouse_x + 'deg)';
});
</script>
<style>

html, body {
height: 100%;
}
body {
font: 12px/1.2 Arial;
perspective: 600px;
perspective: 600px;
background: #666;
background: linear-gradient(#222,#222,#444);
color: #fff;
text-align:center;
}
.threedee {
position: absolute;
left: 50%;
top: 50%;
transform-style: preserve-3d;
transform-origin: 50% 50% 50%;
backface-visibility: hidden;
}
#box-toggle:checked ~ .assembly .face
{
box-shadow: inset 0 0 0 1px #0f0;
mask-image: none !important;
backface-visibility: visible;
}
@keyframes spin {
to {
transform: rotateY(360deg) rotateZ(360deg) rotateX(720deg);
}
}

</style>
</head>
<body>
<script>
document.body.appendChild(createBarrel());
</script>
</body>
</html>