Poner imágenes a cubo 3D

Jeshua_11_7 · #1 (**permalink**) 20/02/2013, 13:10

Hola me encontré con este código de un cubo en 3D funciona bien y todo solo quisiera saber si alguien me puede decir en que linea del código tengo que modificar para poder poner 1 imagen a cada cara del cubo, cambiarle de color y como.

Lo que pasa es que no se casi nada de javascript ni html5 espero puedan ayudarme y si alguien pudiera explicarme todo el código para poder hacerle modificaciones de velocidad y esas cosas se lo agradecería mucho, de antemano gracias.

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Experiment: A Rotating Solid Cube</title>
    <script type="text/javascript">
        window.onload = startDemo;
 
        function Point3D(x,y,z) {
            this.x = x;
            this.y = y;
            this.z = z;
 
            this.rotateX = function(angle) {
                var rad, cosa, sina, y, z
                rad = angle * Math.PI / 180
                cosa = Math.cos(rad)
                sina = Math.sin(rad)
                y = this.y * cosa - this.z * sina
                z = this.y * sina + this.z * cosa
                return new Point3D(this.x, y, z)
            }
 
            this.rotateY = function(angle) {
                var rad, cosa, sina, x, z
                rad = angle * Math.PI / 180
                cosa = Math.cos(rad)
                sina = Math.sin(rad)
                z = this.z * cosa - this.x * sina
                x = this.z * sina + this.x * cosa
                return new Point3D(x,this.y, z)
            }
 
            this.rotateZ = function(angle) {
                var rad, cosa, sina, x, y
                rad = angle * Math.PI / 180
                cosa = Math.cos(rad)
                sina = Math.sin(rad)
                x = this.x * cosa - this.y * sina
                y = this.x * sina + this.y * cosa
                return new Point3D(x, y, this.z)
            }
 
            this.project = function(viewWidth, viewHeight, fov, viewDistance) {
                var factor, x, y
                factor = fov / (viewDistance + this.z)
                x = this.x * factor + viewWidth / 2
                y = this.y * factor + viewHeight / 2
                return new Point3D(x, y, this.z)
            }
        }
 
        var vertices = [
            new Point3D(-1,1,-1),
            new Point3D(1,1,-1),
            new Point3D(1,-1,-1),
            new Point3D(-1,-1,-1),
            new Point3D(-1,1,1),
            new Point3D(1,1,1),
            new Point3D(1,-1,1),
            new Point3D(-1,-1,1)
        ];
 
        // Define the vertices that compose each of the 6 faces. These numbers are
        // indices to the vertex list defined above.
        var faces  = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]];
 
        // Define the colors for each face.
        var colors = [[255,0,0],[0,255,0],[0,0,255],[255,255,0],[0,255,255],[255,0,255]];
 
        var angle = 0;
 
        /* Constructs a CSS RGB value from an array of 3 elements. */
        function arrayToRGB(arr) {
            if( arr.length == 3 ) {
                return "rgb(" + arr[0] + "," + arr[1] + "," + arr[2] + ")";
            }
            return "rgb(0,0,0)";
        }
 
        function startDemo() {
            canvas = document.getElementById("thecanvas");
            if( canvas && canvas.getContext ) {
                ctx = canvas.getContext("2d");
                setInterval(loop,33);
            }
        }
 
        function loop() {
            var t = new Array();
 
            ctx.fillStyle = "rgb(0,0,0)";
            ctx.fillRect(0,0,400,250);
 
            for( var i = 0; i < vertices.length; i++ ) {
                var v = vertices[i];
                var r = v.rotateX(angle).rotateY(angle);
                var p = r.project(400,250,200,4);
                t.push(p)
            }
 
            var avg_z = new Array();
 
            for( var i = 0; i < faces.length; i++ ) {
                var f = faces[i];
                avg_z[i] = {"index":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z) / 4.0};
            }
 
            avg_z.sort(function(a,b) {
                return b.z - a.z;
            });
 
            for( var i = 0; i < faces.length; i++ ) {
                var f = faces[avg_z[i].index]
 
                ctx.fillStyle = arrayToRGB(colors[avg_z[i].index]);
                ctx.beginPath()
                ctx.moveTo(t[f[0]].x,t[f[0]].y)
                ctx.lineTo(t[f[1]].x,t[f[1]].y)
                ctx.lineTo(t[f[2]].x,t[f[2]].y)
                ctx.lineTo(t[f[3]].x,t[f[3]].y)
                ctx.closePath()
                ctx.fill()
            }
            angle += 2
        }
    </script>
</head>
<body>
        <canvas id="thecanvas" width="400" height="250">
        Your browser does not support the HTML5 canvas element. <a href=#>Click here</a> to watch the video.
    </canvas>
 
    </body>
</html>

Carlangueitor · #2 (**permalink**) 20/02/2013, 13:37

No amigo, esto no es cosa de editar una linea y listo, de echo sería modificar por mucho para hacer lo que requieres.

Si quieres que alguien te haga eso lo mejor es que lo pongas en la sección de ofertas de empleo, o que esperes a que alguien con tiempo libre lo haga (igual y con suerte). Si no, pues habrías que empezar a aprender algo de Javascript.

Otra opción es buscar algo ya hecho como lo necesitas. http://www.netmagazine.com/features/...-3d-transforms

Saludos

Jeshua_11_7 · #3 (**permalink**) 20/02/2013, 14:08

Gracias, investigare un poco mas

Panino5001 · #4 (**permalink**) 21/02/2013, 06:15

Básicamente se trata de aplicarle al script que tenés esto:
http://www.forosdelweb.com/3968535-post4.html