JAVASCRIPT create 3d barrel javascript - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

create 3d barrel using javascript


 1302

Show ResultJAVASCRIPT


6

// 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>


By     Created   
The power of the user (%)
10%



The most helpful JAVASCRIPT solutions

How to get client machine name or computer name with javascript ?How to get client machine name or computer name with javascript ?JAVASCRIPT

Click to see more ...

  4.2K     374

get client hostname javascriptget client hostname javascriptJAVASCRIPT

Click to see more ...

  2.3K     254

detect ie javascriptdetect ie javascriptJAVASCRIPT

Click to see more ...

  1.5K     159

Create fireworks using javascriptCreate fireworks using javascriptJAVASCRIPT

Click to see more ...

  1.4K     113

create 3d barrel using javascriptcreate 3d barrel using javascriptJAVASCRIPT

Click to see more ...

  1.3K     83

get ip address javascriptget ip address javascriptJAVASCRIPT

Click to see more ...

  750     74

create qr code javascriptcreate qr code javascriptJAVASCRIPT

Click to see more ...

  512     71

how to create foreach class using javascript ?how to create foreach class using javascript ?JAVASCRIPT

Click to see more ...

  635     69

how to create the connect to a database with ADODB using javascript ?how to create the connect to a database with ADODB using javascript ?JAVASCRIPT

Click to see more ...

  454     59

get filename using javascript get filename using javascript JAVASCRIPT

Click to see more ...

  386     56