[WEB] HTML5 Skin Viewer

Discussion in 'Bukkit Tools' started by earthiverse, Feb 14, 2011.

Thread Status:
Not open for further replies.
  1. Offline

    gaz492

    Took me a few days to change a bit of the Js and add the PHP but i managed to make a easy to use skin searcher and downloader, you can view the modification at http://gaz492.co.uk
     
  2. Offline

    EarlyLegend

    The auto-rotate one swaps over the left and the right side of each head when rendering :p Might wanna fix that, otherwise a very nice tool :p
     
  3. Offline

    mugiwaraboy

    hey cool script I used the Detector.js from Three.js to detect if webgl is present and then render accordingly. By this you don't have to specify the webgl parameter

    PHP:
    <script type="text/javascript" src="backend/resources/3d/Detector.js"></script>
    ...
    if(Detector.webgl) {
        renderer = new THREE.WebGLRenderer();
      } else
        renderer = new THREE.CanvasRenderer();
     
    instead of:
    <?php if(isset($_GET['webgl'])) echo 'renderer = new THREE.WebGLRenderer();'; else echo 'renderer = new THREE.CanvasRenderer();'?>

    can be fixed by this in index.php

    PHP:
     var head_materials = [new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_left.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_right.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_top.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_bottom.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_back.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_front.png')})];
     
    instead of:
        var head_materials = [new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_right.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_left.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_top.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_bottom.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_back.png')}),new THREE.MeshBasicMaterial({map:ImageUtils.loadTexture('images/skins/<?php echo $user?>/head_front.png')})];
     
    earthiverse likes this.
  4. Offline

    hGabbeh

    I can't seem to get the left isometric to work. Did I screw up or is that a incomplete feature?
     
  5. Offline

    andrewpo

    S.E.X.Y!

    <3
     
  6. Offline

    KeybordPiano459

    AWESOME!!! How can I get the stats (under current tests for other projects) on my server? That would be even more awesome!!!
     
  7. Offline

    dmgpunk

    I really like this, thanks for making it.

    I noticed that in "V1 - Automatic Rotation" the sides of the torso are reversed (left on the right, right on the left), which is probably not a big deal to most people but I thought I'd point it out anyway.

    Thanks again, I think it's really cool!
     
  8. Offline

    TNTUP

    earthiverse Hi, I viewed your other project, stats.php. I'm interested to have it. Is it public or its a private one? If private, then nevermind. I checked on your site and it uses beardstat, I tested that plugin earlier, but I didnt tested out the stats page, I disliked it. The one on your site interests me. Also I saw the "killed mobs" wont load on player's stats, is it normal or a load error?

    Hm, It would be nice if its public. Thanks for the player skin viewer! imma test it on my webserver :D

    Oh another bug earthiverse , My helm dosen't show completely. Verify my back helmet and sides: http://earthiverse.ath.cx/skin2/?user=TNTUP&refresh .

    Your helmet is visible in all sides, but mine is just the front and bottom one.

    erm, the isometric one on your site isn't the same as provided in the zip.

    EDIT by Moderator: merged posts, please use the edit button instead of double posting.
     
    Last edited by a moderator: May 9, 2016
  9. Offline

    yura29

    Please make it work with cloaks
     
  10. Offline

    0mi4

    plz shra iso blocks
     
  11. Offline

    uplusion23

    Hello. I'm working on a C# Application using Microsoft Visual Studio 2010. As you might know, the Webforms within the coding application all run on what I assume the IE7-8 engine. I may consider updating my product, but newer versions lose support for key features in my application. I get errors like 'Opject doesn't support property or method of "indexOf" are appearing. There are more, because I solved the indexOf one, I believe, but more just popped up. Do you know a solution to this?
     
  12. Offline

    bearbear12345

  13. Offline

    Eythx

    I've been observing a site that uses this, it's very good and well done. But lately, the head view has not been updating but the 360 degree rotation has. Is this some sort of bug? Sorry if my knowledge seems so primitive about this -_-
     
  14. Offline

    Puseidr

  15. Offline

    bypit

    Hi,
    in Firefox wird der kopf nicht angezeigt. Im Internet Explorer wird er aber angezeigt. Kannst du mir helfen.
     
  16. Offline

    DrazekIronwing


    Hello, I've had a look at the code for the isometric view and I've fixed a few things!

    These changes fix the show/hide hat problem with view.php, adds the left side view to view.php as well as fixing the javascript for the left hand side model not showing, and fixes the skin load script so that if a user skin can't be found (because the username was entered wrong or doesn't exist) it will load the default skin without crashing and showing a blank skin!

    in minecraft_skin.js:

    find:
    Code:
    function draw_model_left(canvas_id,scratch_id,username,scale,hat) {
    var model = document.getElementById(canvas_id).getContext('2d');
    var scratch = document.getElementById(scratch_id).getContext('2d');
     
    //Resize Scratch
    document.getElementById(scratch_id).width = 64*scale;
    document.getElementById(scratch_id).height = 32*scale;
     
    //Resize Isometric Area (Found by trial and error)
    document.getElementById(canvas_id).width = 20*scale;
    document.getElementById(canvas_id).height = 44.8*scale;
     
    var skin = new Image();
    //skin.src = 'http://s3.amazonaws.com/MinecraftSkins/' + username + '.png' - Causes DOM Security Errors. So I made a php script that grabs it instead.
    skin.src = 'http://earthiverse.ath.cx/images/skin/skin2.php?user=' + username;
    replace with:
    Code:
    function draw_model_left(canvas_id,scratch_id,username,scale,hat) {
    var model = document.getElementById(canvas_id).getContext('2d');
    var scratch = document.getElementById(scratch_id).getContext('2d');
     
    //Resize Scratch
    document.getElementById(scratch_id).width = 64*scale;
    document.getElementById(scratch_id).height = 32*scale;
     
    //Resize Isometric Area (Found by trial and error)
    document.getElementById(canvas_id).width = 20*scale;
    document.getElementById(canvas_id).height = 44.8*scale;
     
    var skin = new Image();
    skin.src = 'skin.php?user=' + username;
    NEW view.php: (replace your view.php with this one)
    Code:
    <?php
    if(isset($_GET['user'])) {
    $user = htmlentities($_GET['user'],ENT_QUOTES);
    } else {
    $user = earthiverse;
    }
    ?>
    <!DOCTYPE html>
    <head>
    <meta charset="utf-8" />
    <style>
    * {margin:0; padding:0;}
    div {display:inline-block;}
    .minecraft_head .head {display:none;}
    .minecraft_head:hover .hat {display:none;}
    .minecraft_head:hover .head {display:inline-block;}
    .minecraft_model .model {display:none;}
    .minecraft_model:hover .hat {display:none;}
    .minecraft_model:hover .model {display:inline-block;}
    .scratch {display:none;}
    </style>
    <script src="minecraft_skin.js" type="text/javascript"></script>
    <title><?php echo $user ?>'s Minecraft Skin</title>
    </head>
    <body>
    <div class="minecraft_head">
        <canvas class="hat" id="hat"></canvas>
        <canvas class="head" id="head"></canvas>
        <script type="text/javascript">
            draw_hat('hat','<?php echo $user ?>',25);
            draw_head('head','<?php echo $user ?>',25);
        </script>
    </div>
    <br />
    <div class="minecraft_model">
        <canvas class="scratch" id="scratch_hat"></canvas>
    <canvas class="hat" id="model_hat"></canvas>
        <canvas class="scratch" id="scratch"></canvas>
    <canvas class="model" id="model"></canvas>
        <script type="text/javascript">
            draw_model('model_hat','scratch_hat','<?php echo $user ?>',10,true); // true = hat
            draw_model('model','scratch','<?php echo $user ?>',10,false); // false = no hat
        </script>
    </div>
    <br />
    <div class="minecraft_model">
    <canvas class="scratch" id="scratch_hat_left"></canvas>
    <canvas class="hat" id="model_hat_left"></canvas>
        <canvas class="scratch" id="scratch_left"></canvas>
    <canvas class="model" id="model_left"></canvas>
        <script type="text/javascript">
    draw_model_left('model_hat_left','scratch_hat_left','<?php echo $user ?>',10,true);
            draw_model_left('model_left','scratch_left','<?php echo $user ?>',10,false);
        </script>
    </div>
    </body>
    NEW skin.php: (replace your skin.php with this one)
    Code:
    <?php
    //Change earthiverse in the line below to the default user you want to show
    if(isset($_GET['user'])) $user = htmlentities($_GET['user'],ENT_QUOTES); else $user = "earthiverse";
     
    //Default skin in images/char.png
    $default_skin = imagecreatefrompng('./images/char.png');
    //Grab skin from minecraft servers
    if (@fopen('http://s3.amazonaws.com/MinecraftSkins/'.$user.'.png','r')){
    $user_skin = imagecreatefrompng('http://s3.amazonaws.com/MinecraftSkins/'.$user.'.png');
    }
     
    //Paste the default skin, then the new skin (if it exists) overtop. If it doesn't, it just returns the default skin.
    $temp = imagecreatetruecolor(64,32);
    imagealphablending($temp, false);
    imagesavealpha($temp, true);
    imagecopy($temp, $default_skin, 0, 0, 0, 0, 64, 32);
    if($user_skin){
    imagecopy($temp, $user_skin, 0, 0, 0, 0, 64, 32);
    }
    header('Content-type: image/png');
    imagepng($temp);
    imagedestroy($temp);
    ?>
    Hope these changes help everybody with the isometric view :)
     
  17. Offline

    camji555

  18. Offline

    MrSparkzz

    This is amazing, great job!
     
  19. Offline

    Abigail111

    HI there
    There are so many information about skin viewer.i also want to know that is there any image viewer supports to view the skin image ?Thanks for any recommendation.
     
  20. Offline

    Everyonc

    Hi guys, It is possible to display steave (default skin minecraft) if player non-premium?
     
  21. Offline

    Sydaroth

    Thought maybe somebody would want this:
    How to make it work with Cloaks:
    (I made it with the click and rotate version as base, but it may also work with the autorotate one.)

    Add this function to \backend\backend.php:
    PHP:
    function minecraft_cloak_download($user) {
    if(!
    file_exists('images/skins/'.$user.'/cloak_base.png')) {
      if(@
    getimagesize('http://s3.amazonaws.com/MinecraftCloaks/'.$user.'.png')) {
      
    //Make a new directory
      
    If(!is_dir('images/skins/'.$user)) {
        
    mkdir('images/skins/'.$user,0777);
      }
      
    //Download the cloak from Minecraft.net and put it in /images/skins/
      
    $url 'http://s3.amazonaws.com/MinecraftCloaks/'.$user.'.png';
      
    $img 'images/skins/'.$user.'/cloak_base.png';
      
    file_put_contents($imgfile_get_contents($url));
     
      
    //Create another image twice the size
      
    $original imagecreatefrompng('images/skins/'.$user.'/cloak_base.png');
     
      
    /////////////////////////
      // Body Parts (for 3D) //
      /////////////////////////
     
      
    minecraft_skin_3d_part($original,$user,1,0,10,1,256,"cloak_top"FALSEFALSE);
      
    minecraft_skin_3d_part($original,$user,11,0,10,1,256,"cloak_bottom"FALSEFALSE);
      
    minecraft_skin_3d_part($original,$user,0,1,1,16,256,"cloak_right"FALSEFALSE);
      
    minecraft_skin_3d_part($original,$user,12,1,10,16,256,"cloak_front"FALSEFALSE);
      
    minecraft_skin_3d_part($original,$user,11,1,1,16,256,"cloak_left"FALSEFALSE);
      
    minecraft_skin_3d_part($original,$user,1,1,10,16,256,"cloak_back"FALSEFALSE);
     
      
    //Release original from memory (Skin from minecraft.net)
      
    imagedestroy($original);
      }
    }
    }
    then add then following line at the start of index.php
    PHP:
    minecraft_cloak_download($user);
    Just put it after
    PHP:
    if(isset($refresh)) minecraft_skin_delete($user);
    At last you have to add the following lines to index.php
    HTML:
    //Cloak
        var cloak_materials = [];
        cloak_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/cloak_right.png')})]);
        cloak_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/cloak_left.png')})]);
        cloak_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/cloak_top.png')})]);
        cloak_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/cloak_bottom.png')})]);
        cloak_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/cloak_back.png')})]);
        cloak_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/cloak_front.png')})]);
     
        cloak = new THREE.Mesh( new THREE.CubeGeometry(10, 16, 1, 0, 0, 0, cloak_materials), new THREE.MeshFaceMaterial());
        cloak.position.x = 0;
        cloak.position.y = -12;
        cloak.position.z = 4;
        cloak.rotation.x = -0.2;
        cloak.overdraw = true;
        scene.addObject(cloak);
    Just add it previous to
    HTML:
        renderer = <?php if(isset($_GET['webgl'])) echo 'new THREE.WebGLRenderer();'; else echo 'new THREE.CanvasRenderer();'; ?>
    Preview:
    [​IMG][​IMG][​IMG][​IMG]

    Hope this helped at least somebody^^
     
    Maulss likes this.
  22. Offline

    earthiverse

    I've started to updated it for the 1.8 skins. It automatically converts old skins to the 1.8 format as well.

    It's mostly working, just needs a few more tweaks before I release it.

    It's 100% javascript and HTML5 this time (no php!) so if you want the source code right now (before I push it to github), just view the source :p

    http://earthiverse.ath.cx/skin4/
     
  23. Offline

    Ultimate_n00b

    Using your modal code, is looking great. Will that be updated to 1.8 as well?

    [​IMG]
     
  24. Offline

    Doctacosa

    Looking forward to 1.8 support! I integrated this into my forums some time back, and it's working quite well! I added in cloak support myself, but an official version of that would be nice, too. :)
     
  25. Offline

    earthiverse

    Should be fairly easy once I'm done this, I'll do it after I finish the 3d version.

    The 'official' version would probably be pretty similar to the other code. I'm not exactly too sure on how cloaks work (separate images? plugin?), so I'd have to do some research, but that's minor.
     
    Ultimate_n00b likes this.
  26. Offline

    GodsDead

  27. Offline

    Absentee23


    The design we use on CakeMine is a combination of this skin viewer, the stats UI, an mcMMO stats web end, as well as my own customizations to all of the above (especially heavy customization & modification to the stats UI), all integrated together. :)
     
  28. Offline

    moo3oo3oo3

    The Isometric download code does not work...
     
Thread Status:
Not open for further replies.

Share This Page