[WEB] HTML5 Skin Viewer

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

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

    earthiverse

    Sorry I kind of abandoned this.
    It seems that this may be able to be made in pure html5 without php.

    I'll spend some time on it, but no promises for anything actually materializing.

    edit:
    Some solutions to common problems.
    1. chmod +x backend.php, rmdir.php and chmod 777 images/skins.
    you don't need to chmod everything.
    2. webgl doesn't allow transparency, so hats with transparent parts result in a black skin. solution? try without the &webgl tag.
    3. still have black parts? try resaving/reuploading your skin using photoshop and saving as an 8 bit png.
    4. this renderer does not make mono-color hats transparent. if it's supposed to be transparent, just save it as transparent.
    -

    3d is complicated without an api to work with, but i have an efficient isometric renderer. The script is only one file and has no server side handling of images.
    Unfortunately, it only looks good in firefox (with anything higher than scale=1). This is a big caveat. :'(
    try it out at
    http://earthiverse.ath.cx/resources/scripts_internal/minecraft_skin.php?user=earthiverse&scale=10
     
  2. Offline

    sfxworks

    oo im defiantly going to play with this.

    Hmm. Whos mr.doob?

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

    Valrix

    Where did you get the Three.js file from? I noticed it's a lot smaller than the official one.

    EDIT: I found where you got it, but the version you're giving out is very, very old.
     
  4. Offline

    clone1018

    Mind if I hook this up at Minotar for public use? We have tons of bandwidth and I've been looking into making something like this.
     
  5. Offline

    earthiverse

    Yeah, it's old. Some things changed, and I'll try to make a new one using the newer three.js when I have some time.
    I have tried a bit with it, but it seemed a lot slower, so we'll see.
    edit: http://earthiverse.ath.cx/skin2/?user=earthiverse
    Click and drag to move around.

    Feel free to do whatever you want.
     
  6. Offline

    Haribo98

    Can you still have one for just an enlarged head? I need it so you Thanked players lists skin heads are always up to date
     
  7. Offline

    darkwarriors

    how can i scale the image for adding viwier in my header homepage?
     
  8. Offline

    earthiverse

    If you put it in an iframe, it automatically scales to the size of it. Probably the best way of doing something like what you're saying.
    See: http://earthiverse.ath.cx/skin/iframe.html

    Still head -> See http://earthiverse.ath.cx/skin/head_still.php
    PHP:
    <!--
    3-D Minecraft Skin Viewer
    By Kent Rasmussen @ earthiverse.ath.cx
    Using Three.Js HTML5 3D Engine from https://github.com/mrdoob/three.js/
    Add ?user=USERNAME to render a specific username
    Add &refresh to re-grab the skin and generate new parts
    Add &webgl to render in webgl
    -->
    <?php include('backend/backend.php');
    if(!isset(
    $user)) $user earthiverse;
    if(isset(
    $refresh)) minecraft_skin_delete($user);
    minecraft_skin_download($user);?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="backend/resources/3d/Three.js"></script>
    <script type="text/javascript" src="backend/resources/3d/Cube.js"></script>
    <script type="text/javascript" src="backend/resources/3d/ImageUtils.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>3d minecraft body test v1.0</title>
    </head>

    <body>
    <script type="text/javascript">
     var camera, scene, renderer;
     init();
     setInterval( loop, 1000 / 60 );
     function init() {
      camera = new THREE.Camera(7, window.innerWidth / window.innerHeight, 1, 1000);
      scene = new THREE.Scene();

      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')})];

      head = new THREE.Mesh( new Cube(8, 8, 8, 1, 1, head_materials), new THREE.MeshFaceMaterial());
      head.position.x = 0;
      head.position.y = 0;
      head.position.z = 0;
      scene.addObject(head);

      <?php if(isset($_GET['webgl'])) echo 'renderer = new THREE.WebGLRenderer();'; else echo 'renderer = new THREE.CanvasRenderer();'?>

      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
     }
     var xvar = 0;
     function loop() {
      xvar = 350*Math.PI/180;
      camera.target.position.x = 0;
      camera.target.position.y = 0;
      camera.target.position.z = 0;

      camera.position.x = 0 - 100*Math.sin(xvar);
      camera.position.y = 0 - 30*Math.sin(xvar);
      camera.position.z = 0 - 100*Math.cos(xvar);
      renderer.render( scene, camera );
     }
    </script>

    </body>
    </html>
    Rotating head -> See http://earthiverse.ath.cx/skin/head_rotate.php
    PHP:
    <!--
    3-D Minecraft Skin Viewer
    By Kent Rasmussen @ earthiverse.ath.cx
    Using Three.Js HTML5 3D Engine from https://github.com/mrdoob/three.js/
    Add ?user=USERNAME to render a specific username
    Add &refresh to re-grab the skin and generate new parts
    Add &webgl to render in webgl
    -->
    <?php include('backend/backend.php');
    if(!isset(
    $user)) $user earthiverse;
    if(isset(
    $refresh)) minecraft_skin_delete($user);
    minecraft_skin_download($user);?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="backend/resources/3d/Three.js"></script>
    <script type="text/javascript" src="backend/resources/3d/Cube.js"></script>
    <script type="text/javascript" src="backend/resources/3d/ImageUtils.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <title>3d minecraft body test v1.0</title>
    </head>

    <body>
    <script type="text/javascript">
     var camera, scene, renderer;
     init();
     setInterval( loop, 1000 / 60 );
     function init() {
      camera = new THREE.Camera(7, window.innerWidth / window.innerHeight, 1, 1000);
      scene = new THREE.Scene();

      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')})];

      head = new THREE.Mesh( new Cube(8, 8, 8, 1, 1, head_materials), new THREE.MeshFaceMaterial());
      head.position.x = 0;
      head.position.y = 0;
      head.position.z = 0;
      scene.addObject(head);

      <?php if(isset($_GET['webgl'])) echo 'renderer = new THREE.WebGLRenderer();'; else echo 'renderer = new THREE.CanvasRenderer();'?>

      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );
     }
     var xvar = 0;
     function loop() {
      xvar += Math.PI/180;
      camera.target.position.x = 0;
      camera.target.position.y = 0;
      camera.target.position.z = 0;

      camera.position.x = 0 - 100*Math.sin(xvar);
      camera.position.y = 0 - 30*Math.sin(xvar);
      camera.position.z = 0 - 100*Math.cos(xvar);
      renderer.render( scene, camera );
     }
    </script>

    </body>
    </html>
    If you want the face just flat, no 3d effect, see http://minotar.net/
     
  9. Offline

    tha d0ctor

    awesome! is the drag and move version of the skin viewer in the OP?
     
  10. Offline

    earthiverse

    It is now.
     
  11. Offline

    tha d0ctor

    great, thanks!
     
  12. Offline

    coolrob335

    I have had a few people on my site asking for a background switcher, so you can decide which background you want, rather than the default stone/striped bg's.

    Also, I have found a slight bug in version 2.0 when the character is tilted forwards or backwards, the head is surrounded in the stone background (image here), and I have also found that v2.0 only really works with webgl, as if &webgl isn't added to the end of the url, there are massive white areas (image here). Hope this helps, pointing out some problems and suggestions :)
     
  13. Offline

    earthiverse

    I don't know what's going on with the white stuff, never ever seen that.
    Although, each browser renders it differently. see: http://imgur.com/koJQv

    May I ask which browser and operating system you are using?

    The transparent head border problem only exists in webgl and is caused somehow by the hat. It won't render anything behind the object and the transparency goes straight through to the background.

    The latest version now has better canvas (non webgl) rendering, it's 20% cooler/less ugly.
    It might also render a bit faster/smoother.

    Also, I put an example background switcher in as per your request (Not in .zip distributable yet, I wanted feedback first).
    It should be super simple to modify and add your own in. Click the top left textures.
    See: http://earthiverse.ath.cx/skin2/?user=earthiverse

    edit:
    Fixed in upcoming version 2.2:
    1. Faster
    - Optimized a bit
    2. More Pretty
    - Black/Solid colour hat transparency problems? No more!
    - Diagonal lines going across textures are gone
    3. Background switcher.
     
  14. Offline

    Stevenb88

    okay i have been working with this for about 3 days now to try and use what you have done into a profile page im trying to create.

    Here is how ive coded it up and also added the ability in for the background to change (which have tested and works and all players on the server love this.)
    Code:
    <!--
    3-D Minecraft Skin Viewer
    By Kent Rasmussen @ earthiverse.ath.cx
    Using Three.Js HTML5 3D Engine from https://github.com/mrdoob/three.js/
    Add ?user=USERNAME to render a specific username
    Add &refresh to re-grab the skin and generate new parts
    Add &webgl to render in webgl
    -->
    <?php include('backend/backend.php');
    if(!isset($user)) $user = stevenb88;
    if(isset($refresh)) minecraft_skin_delete($user);
    minecraft_skin_download($user);?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" src="backend/resources/3d/Three.js"></script>
    <script type="text/javascript" src="backend/resources/3d/RequestAnimationFrame.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>3d minecraft body test</title>
    </head>
    <script language="JavaScript">
    <!--
    
    // Copyright 2001 by www.CodeBelly.com
    // Please do *not* remove this notice.
    
    var backImage = new Array(); // don't change this
    
    // Enter the image filenames you wish to use.
    // Follow the pattern to use more images.  The
    // number in the brackets [] is the number you
    // will use in the function call to pick each
    // image.
    
    // Note how backImage[4] = "" -- which would
    // set the page to *no* background image.
    
    backImage[0] = "images/back%20ground/city.png";
    backImage[1] = "images/back%20ground/sunrise.png";
    backImage[2] = "images/back%20ground/stone.png";
    backImage[3] = "mages/back%20ground/creeper.png";
    backImage[4] = "";
    
    // Do not edit below this line.
    //-----------------------------
    
    function changeBGImage(whichImage){
    if (document.body){
    document.body.background = backImage[whichImage];
    }
    }
    
    //-->
    </script>
    <body background="images/back%20ground/g_line.png">
    <div id="top">
    <p align="right">
    <a href="javascript:changeBGImage(0)">
    <img alt="" src="images/back%20ground/city.png" width="20" height="20" /></a>
    <a href="javascript:changeBGImage(1)">
    <img alt="" src="images/back%20ground/sunrise.png" width="20" height="20" /></a>
    <a href="javascript:changeBGImage(2)">
    <img alt="" src="images/back%20ground/stone.png" width="20" height="20" /></a>
    <a href="javascript:changeBGImage(3)">
    <img alt="" src="images/back%20ground/creeper.png" width="20" height="20" /></a>
    </div>
    
    <script type="text/javascript">
      var container, info;
      var camera, scene, renderer;
      var xvar = 0;
      var targetRotationX = 0;
      var targetRotationXOnMouseDown = 0;
      var targetRotationY = 0;
      var targetRotationYOnMouseDown = 0;
      var mouseX = 0;
      var mouseXOnMouseDown = 0;
      var mouseY = 0;
      var mouseYOnMouseDown = 0;
      var windowHalfX = window.innerWidth / 2;
      var windowHalfY = window.innerHeight / 2;
    
      init();
      animate();
    
      function init() {
        container = document.createElement( 'div' );
        document.body.appendChild( container );
        camera = new THREE.Camera(20, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.target.position.x = 0;
        camera.target.position.y = -11;
        camera.target.position.z = 0;
        scene = new THREE.Scene();
    
        var info = document.createElement( 'div' );
        info.style.position = 'absolute';
        info.style.fontFamily = 'Times New Roman';
        info.style.fontSize = '14x';
        info.style.left = '10px';
        info.style.top = '10px';
        info.style.textAlign = 'left';
        info.innerHTML = '<strong><?php echo $user; ?>\'s skin</strong><br />click + drag model to change view';
        container.appendChild( info );
    
        //Hat
        var hat_materials = [];
        hat_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/hat_right.png')})]);
        hat_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/hat_left.png')})]);
        hat_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/hat_top.png')})]);
        hat_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/hat_bottom.png')})]);
        hat_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/hat_back.png')})]);
        hat_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/hat_front.png')})]);
    
        hat = new THREE.Mesh( new THREE.CubeGeometry(9, 9, 9, 1, 1, 1, hat_materials), new THREE.MeshFaceMaterial());
        hat.position.x = 0;
        hat.position.y = 0;
        hat.position.z = 0;
        scene.addObject(hat);
    
        //Head
        var head_materials = [];
        head_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/head_right.png')})]);
        head_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/head_left.png')})]);
        head_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/head_top.png')})]);
        head_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/head_bottom.png')})]);
        head_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/head_back.png')})]);
        head_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/head_front.png')})]);
    
        head = new THREE.Mesh( new THREE.CubeGeometry(8, 8, 8, 1, 1, 1, head_materials), new THREE.MeshFaceMaterial());
        head.position.x = 0;
        head.position.y = 0;
        head.position.z = 0;
        scene.addObject(head);
    
        //Body
        var body_materials = [];
        body_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/body_right.png')})]);
        body_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/body_left.png')})]);
        body_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/body_top.png')})]);
        body_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/body_bottom.png')})]);
        body_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/body_back.png')})]);
        body_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/body_front.png')})]);
    
        body = new THREE.Mesh( new THREE.CubeGeometry(8, 12, 4, 1, 1, 1, body_materials), new THREE.MeshFaceMaterial());
        body.position.x = 0;
        body.position.y = -10;
        body.position.z = 0;
        scene.addObject(body);
    
        //Arm_Left
        var arm_left_materials = [];
        arm_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_left_inner.png')})]);
        arm_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_left_outer.png')})]);
        arm_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_left_top.png')})]);
        arm_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_left_bottom.png')})]);
        arm_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_left_back.png')})]);
        arm_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_left_front.png')})]);
    
        arm_left = new THREE.Mesh( new THREE.CubeGeometry(4, 12, 4, 1, 1, 1, arm_left_materials), new THREE.MeshFaceMaterial());
        arm_left.position.x = 6;
        arm_left.position.y = -10;
        arm_left.position.z = 0;
        scene.addObject(arm_left);
    
        //Arm_Right
        var arm_right_materials = [];
        arm_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_right_outer.png')})]);
        arm_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_right_inner.png')})]);
        arm_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_right_top.png')})]);
        arm_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_right_bottom.png')})]);
        arm_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_right_back.png')})]);
        arm_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/arm_right_front.png')})]);
    
        arm_right = new THREE.Mesh( new THREE.CubeGeometry(4, 12, 4, 1, 1, 1, arm_right_materials), new THREE.MeshFaceMaterial());
        arm_right.position.x = -6;
        arm_right.position.y = -10;
        arm_right.position.z = 0;
        scene.addObject(arm_right);
    
        //Leg_Left
        var leg_left_materials = [];
        leg_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_left_inner.png')})]);
        leg_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_left_outer.png')})]);
        leg_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_left_top.png')})]);
        leg_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_left_bottom.png')})]);
        leg_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_left_back.png')})]);
        leg_left_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_left_front.png')})]);
    
        leg_left = new THREE.Mesh( new THREE.CubeGeometry(4, 12, 4, 1, 1, 1, leg_left_materials), new THREE.MeshFaceMaterial());
        leg_left.position.x = 2;
        leg_left.position.y = -22;
        leg_left.position.z = 0;
        scene.addObject(leg_left);
    
        //Leg_Right
        var leg_right_materials = [];
        leg_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_right_inner.png')})]);
        leg_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_right_outer.png')})]);
        leg_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_right_top.png')})]);
        leg_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_right_bottom.png')})]);
        leg_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_right_back.png')})]);
        leg_right_materials.push([new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture('images/skins/<?php echo $user; ?>/leg_right_front.png')})]);
    
        leg_right = new THREE.Mesh( new THREE.CubeGeometry(4, 12, 4, 1, 1, 1, leg_right_materials), new THREE.MeshFaceMaterial());
        leg_right.position.x = -2;
        leg_right.position.y = -22;
        leg_right.position.z = 0;
        scene.addObject(leg_right);
    
        renderer = <?php if(isset($_GET['webgl'])) echo 'new THREE.WebGLRenderer();'; else echo 'new THREE.CanvasRenderer();'; ?>
        renderer.setSize( window.innerWidth, window.innerHeight );
        container.appendChild( renderer.domElement );
        document.addEventListener( 'mousedown', onDocumentMouseDown, false );
        document.addEventListener( 'touchstart', onDocumentTouchStart, false );
        document.addEventListener( 'touchmove', onDocumentTouchMove, false );
      }
    
      function onDocumentMouseDown( event ) {
        event.preventDefault();
        document.addEventListener( 'mousemove', onDocumentMouseMove, false );
        document.addEventListener( 'mouseup', onDocumentMouseUp, false );
        document.addEventListener( 'mouseout', onDocumentMouseOut, false );
        mouseXOnMouseDown = event.clientX - windowHalfX;
        targetRotationXOnMouseDown = targetRotationX;
        mouseYOnMouseDown = event.clientY - windowHalfY;
        targetRotationYOnMouseDown = targetRotationY;
      }
    
      function onDocumentMouseMove( event ) {
        mouseX = event.clientX - windowHalfX;
        targetRotationX = targetRotationXOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
        mouseY = event.clientY - windowHalfY;
        targetRotationY = targetRotationYOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.02;
      }
    
      function onDocumentMouseUp( event ) {
        document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
        document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
        document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
      }
    
      function onDocumentMouseOut( event ) {
        document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
        document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
        document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
      }
    
      function onDocumentTouchStart( event ) {
        if ( event.touches.length == 1 ) {
          event.preventDefault();
          mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
          mouseYOnMouseDown = event.touches[ 0 ].pageY - windowHalfY;
          targetRotationXOnMouseDown = targetRotationX;
          targetRotationYOnMouseDown = targetRotationY;
        }
      }
    
      function onDocumentTouchMove( event ) {
        if ( event.touches.length == 1 ) {
          event.preventDefault();
          mouseX = event.touches[ 0 ].pageX - windowHalfX;
          targetRotationX = targetRotationXOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
          targetRotationY = targetRotationYOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.05;
        }
      }
    
      function animate() {
        requestAnimationFrame( animate );
        render();
      }
    
      function render() {
        camera.position.x = 0 - 100*Math.sin(targetRotationX);
        camera.position.y = 0 - 50*Math.sin(targetRotationY);
        camera.position.z = 0 - 100*Math.cos(targetRotationX);
    
        xvar += Math.PI/180
    
        //Leg Swing
        leg_left.rotation.x = Math.cos(xvar);
        leg_left.position.z = 0 - 6*Math.sin(leg_left.rotation.x);
        leg_left.position.y = -16 - 6*Math.abs(Math.cos(leg_left.rotation.x));
        leg_right.rotation.x = Math.cos(xvar + (Math.PI));
        leg_right.position.z = 0 - 6*Math.sin(leg_right.rotation.x);
        leg_right.position.y = -16 - 6*Math.abs(Math.cos(leg_right.rotation.x));
    
        //Arm Swing
        arm_left.rotation.x = Math.cos(xvar + (Math.PI));
        arm_left.position.z = 0 - 6*Math.sin(arm_left.rotation.x);
        arm_left.position.y = -4 - 6*Math.abs(Math.cos(arm_left.rotation.x));
        arm_right.rotation.x = Math.cos(xvar);
        arm_right.position.z = 0 - 6*Math.sin(arm_right.rotation.x);
        arm_right.position.y = -4 - 6*Math.abs(Math.cos(arm_right.rotation.x));
    
        renderer.render( scene, camera );
      }
    </script>
    </body>
    </html>
    The only problem i am having is that the character skin is not downloading or updating it is just staying black as showen by attached image. (is there a way to fix this or will i have to create each character skin in to the skin folder for this to work?[​IMG]

    Other than the skin coming out just black everything is working perfectly.
     
  15. Offline

    coolrob335

    sorry, i'm so used to getting emails for replies, i'm using Safari 5.1 on Mac OS X Lion, and thanks for putting in the background switcher, but on the demo, when i click the buttons, it does nothing :( (also on safari 5.1, i'll try on firefox) :D

    EDIT: it works perfectly in firefox, no white parts, so it's apple's problem :p they need to handle webgl and html5 better :)

    EDIT 2: the sides of my head seem to be backwards, it looks like i have sideburns :p
    [​IMG]

    P.S. i have email notifications set up now, so i should be a bit quicker in responding :)
     
  16. Offline

    earthiverse

    Fixed. The other side of the head was right, my bad. I hope I have all the kinks worked out for at least proper skin reproduction.

    Try to chmod 666 the images/skins folder, and chmod +x or chmod776 backend.php and rmdir.php
    The first gives permission for any user to write/read to that folder, and the second lets users execute backend.php/rmdir.php

    Also, I've updated skin2.zip to reflect the changes.
    http://dl.dropbox.com/u/431832/skin2.zip
     
  17. Offline

    coolrob335

    Have you updated the test on your website to reflect these changes? cos I still get this: ImageUploadedByTapatalk1315981794.464503.jpg
    I will try it out when I get on my computer :)
     
  18. Offline

    earthiverse

    Add &refresh to the end of the URL to reload your skin if/when changes are made and refresh the page yourself to clear your local cache.
    Everything seems to be good now. c:

    http://i.imgur.com/tx11Q.jpg
     
  19. Offline

    coolrob335

    I'll just give you a link this time :) I just uploaded it to my website, but no image is shown, I tried doing the chmods shown above, but it just showed a load of errors with &refresh after :(
    EDIT: also, using firefox, the buttons don't seem to change the background for me :(
     
  20. Offline

    earthiverse

    Taking a look at your source code, you have a bunch of 'djs' script things for some reason.
    Like, view source on your view.php and compare it with the index.php from my site.
    I don't know how you edited the file, but that could be messing them up.


    Does the background switch work on my site? http://earthiverse.ath.cx/skin2/

    Also, I accidentally left my google analytics script in the skin2 index file, so it is removed now.
     
  21. Offline

    coolrob335

    Weird... I didn't edit the file, I'll have a look into this when I get back from school.

    It works fine on your site, but not on safari (on firefox the buttons work properly)

    EDIT: wow :O just looked at my source... it may be because I'm using cloudflare (cdn)

    EDIT: ok, I'm attempting to work with the customer support of my hosting provider, and hopefully I should be able to put the script on a subdomain, out of the reach of cloudflare screwing it up :) *crosses fingers*
     
  22. Offline

    earthiverse

    Well, I took a further look at your site and got this error:
    "NetworkError: 404 Not Found - http://coolrob335.com/skin2/backend/resources/3d/RequestAnimationFrame.js"
     
  23. Offline

    coolrob335

  24. Offline

    earthiverse

    That's super weird how my website was still working, even though the file was misnamed.
    I don't understand it, but it's now updated to the correct name.

    And no problems, lots of errors are fixed now as a result. c:
     
  25. Offline

    coolrob335

    One last thing... is there a way to make the update time shorter, so it doesn't take as long to grab the newest version of a player's skin, if it's just been updated?
     
  26. Offline

    earthiverse

    line 11 on index.php (view.php for you):
    PHP:
    if(isset($refresh)) minecraft_skin_delete($user);
    change to
    PHP:
    minecraft_skin_delete($user);
    will grab and render a new skin every time. it's an easy temporary fix.
    I'll put a more resource friendly skin update on my to-do list that checks the skin from minecraft.net, compares it to the local one, and then re-renders if they are different.

    In other news, I've got an isometric model working.
    http://earthiverse.ath.cx/skin3/?user=earthiverse&scale=10
    It shows up on Firefox, Chrome and even (gasp) IE9.
    If you're using Firefox, you can even right click and save image (you can do this with 3d skin viewer too, with more whitespace) c:
     
  27. Offline

    coolrob335

    Thanks :D, and ooh, I like the look of the isometric model :)
     
  28. Offline

    coolrob335

    Ok, took me a while to figure this out, but changing
    PHP:
    if(isset($refresh)) minecraft_skin_delete($user);
    to
    PHP:
    minecraft_skin_delete($user);
    seems to delete the skins folder :(

    Edit: also, does http://skins.coolrob335.com/?user=coolrob335 work properly for you? it only seems to show your (earthiverse's) skin as it's in the skins folder, but even though it's chmodded 777, no other skins are being added :(
     
  29. Offline

    Stevenb88

    Thanks i love this HTML5 Skin Viewer after changing a few things on my server pc managed to get it working and all seems to be going together fine.
     
  30. Offline

    ChrisX930

    need help, I`ll get this error:
    Use of undefined constant earthiverse - assumed 'earthiverse' in /..../TriaCraft/skin2/index.php on line 10
     
Thread Status:
Not open for further replies.

Share This Page