turns-00080.parquet:913
2a14920a800cd8f8ad9076e3degenerate_repetitionAbsentFinal dense release
USER
ya no hay advertencias pero esta el mismo cubo hecho con lineas, y las caras del cubo sunas sobre otras planas como desde el inicio
ASSISTANT
Gracias por mantener la comunicación y haber eliminado ya las advertencias. El problema de que las caras se apilen unas sobre otras y no se vea realmente un cubo 3D sólido es porque el método que usamos muestra cada cara como un *Sprite* cuadrado simplemente posicionado y escalado en 2D según la proyección, sin deformación ni perspectiva en la forma de la cara.
Como Flash (AS3) no permite deformar los Sprites de forma nativa (no tenemos acceso a mallas, vértices ni manipulación 3D directa del Sprite), **para una representación realista del cubo 3D** debemos dibujar directamente cada cara como un polígono con sus cuatro vértices proyectados, o simularlo dibujando en vectores.
---
## Solución para que las caras NO se vean planas por encima sino como polígonos con perspectiva
En vez de asignar posiciones XY y escalar un Sprite rectangular (como se hacía antes), **vamos a dibujar cada cara con sus cuatro vértices proyectados en 2D**, usando `graphics` para trazar un polígono convexo con sus cuatro puntos.
Esto permite simular el cubo 3D real, con caras verdaderamente en perspectiva.
---
# Código completo revisado para dibujar caras como polígonos
```actionscript3
stage.frameRate = 60;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.geom.Point;
import flash.display.Shape;
var size:Number = 150;
var vertices:Array = [
{x:-size/2, y:-size/2, z:-size/2}, // 0
{x: size/2, y:-size/2, z:-size/2}, // 1
{x: size/2, y: size/2, z:-size/2}, // 2
{x:-size/2, y: size/2, z:-size/2}, // 3
{x:-size/2, y:-size/2, z: size/2}, // 4
{x: size/2, y:-size/2, z: size/2}, // 5
{x: size/2, y: size/2, z: size/2}, // 6
{x:-size/2, y: size/2, z: size/2} // 7
];
var facesIndices:Array = [
[4,5,6,7], // Front
[1,0,3,2], // Back
[0,4,7,3], // Left
[5,1,2,6], // Right
[0,1,5,4], // Top
[7,6,2,3] // Bottom
];
var faceColors:Array = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF];
var faces:Array = [];
var cubeRotationX:Number = 0;
var cubeRotationY:Number = 0;
var velocityX:Number = 0;
var velocityY:Number = 0;
var dragging:Boolean = false;
var lastMousePos:Point = new Point();
var currentMousePos:Point = new Point();
var focalLength:Number = 600;
var i:int;
// Creamos Shapes para cada cara
for(i = 0; i < facesIndices.length; i++){
var shp:Shape = new Shape();
addChild(shp);
faces.push(shp);
}
function deg2rad(deg:Number):Number {
return deg * Math.PI / 180;
}
function rotateX(p:Object, angle:Number):Object {
var rad:Number = deg2rad(angle);
var cosA:Number = Math.cos(rad);
var sinA:Number = Math.sin(rad);
return {
x: p.x,
y: p.y * cosA - p.z * sinA,
z: p.y * sinA + p.z * cosA
};
}
function rotateY(p:Object, angle:Number):Object {
var rad:Number = deg2rad(angle);
var cosA:Number = Math.cos(rad);
var sinA:Number = Math.sin(rad);
return {
x: p.x * cosA + p.z * sinA,
y: p.y,
z: -p.x * sinA + p.z * cosA
};
}
function project(p:Object):Point {
var scale:Number = focalLength / (focalLength + p.z);
return new Point(p.x * scale, p.y * scale);
}
function render():void {
// Transformamos y proyectamos vertices
var transformedVertices:Array = [];
i = 0;
while(i < vertices.length){
var v:Object = vertices[i];
var r:Object = rotateX(rotateY(v, cubeRotationY), cubeRotationX);
transformedVertices.push(r);
i++;
}
// Calculamos profundidad media de cara para ordenar por Painter's algo
var faceDepths:Array = [];
i = 0;
while(i < facesIndices.length){
var faceVerts:Array = facesIndices[i];
var avgZ:Number = 0;
for each(var idx:int in faceVerts){
avgZ += transformedVertices[idx].z;
}
avgZ /= faceVerts.length;
faceDepths.push({index:i, depth:avgZ});
i++;
}
// Ordenar las caras de atras hacia adelante
faceDepths.sortOn("depth", Array.NUMERIC);
// Usamos orden para dibujar las caras (painter's algo)
i = 0;
while(i < faceDepths.length){
var faceIndex:int = faceDepths[i].index;
var faceVertIndices:Array = facesIndices[faceIndex];
var shp:Shape = faces[faceIndex];
// Limpiamos y empezamos a dibujar polígono
shp.graphics.clear();
// Calculamos ilum y color modulando alpha por orientación
var a:Object = transformedVertices[faceVertIndices[0]];
var b:Object = transformedVertices[faceVertIndices[1]];
var c:Object = transformedVertices[faceVertIndices[2]];
var u:Object = {x:b.x - a.x, y:b.y - a.y, z:b.z - a.z};
var w:Object = {x:c.x - a.x, y:c.y - a.y, z:c.z - a.z};
var nx:Number = u.y * w.z - u.z * w.y;
var ny:Number = u.z * w.x - u.x * w.z;
var nz:Number = u.x * w.y - u.y * w.x;
var len:Number = Math.sqrt(nx*nx + ny*ny + nz*nz);
if(len != 0){
nx /= len; ny /= len; nz /= len;
}
var lightDir:Object = {x:0, y:0, z:-1};
var dot:Number = nx * lightDir.x + ny * lightDir.y + nz * lightDir.z;
if(dot < 0) dot = 0;
var faceColor:uint = faceColors[faceIndex];
// Ponemos alpha entre 0.3 y 1 según ilumin
var alphaVal:Number = 0.3 + 0.7 * dot;
// Empieza dibujado con color y alpha
shp.graphics.beginFill(faceColor, alphaVal);
// Movemos al primer punto proyectado
var p0:Point = project(transformedVertices[faceVertIndices[0]]);
shp.graphics.moveTo(stage.stageWidth/2 + p0.x, stage.stageHeight/2 + p0.y);
// Van los demás puntos
var j:int = 1;
while(j < faceVertIndices.length){
var pj:Point = project(transformedVertices[faceVertIndices[j]]);
shp.graphics.lineTo(stage.stageWidth/2 + pj.x, stage.stageHeight/2 + pj.y);
j++;
}
// Cerramos polígono
shp.graphics.lineTo(stage.stageWidth/2 + p0.x, stage.stageHeight/2 + p0.y);
shp.graphics.endFill();
i++;
}
}
// Eventos
stage.addEventListener(MouseEvent.MOUSE_DOWN, handleMouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp);
stage.addEventListener(MouseEvent.MOUSE_OUT, handleMouseUp);
stage.addEventListener(Event.ENTER_FRAME, handleEnterFrame);
function handleMouseDown(e:MouseEvent):void {
dragging = true;
lastMousePos.x = stage.mouseX;
lastMousePos.y = stage.mouseY;
velocityX = 0;
velocityY = 0;
}
function handleMouseUp(e:MouseEvent):void {
dragging = false;
}
function handleEnterFrame(e:Event):void {
if(dragging){
currentMousePos.x = stage.mouseX;
currentMousePos.y = stage.mouseY;
var dx:Number = currentMousePos.x - lastMousePos.x;
var dy:Number = currentMousePos.y - lastMousePos.y;
cubeRotationY += dx * 0.5;
cubeRotationX += dy * 0.5;
velocityY = dx * 0.5;
velocityX = dy * 0.5;
lastMousePos.x = currentMousePos.x;
lastMousePos.y = currentMousePos.y;
} else {
var friction:Number = 0.90;
velocityX *= friction;
velocityY *= friction;
if(Math.abs(velocityX) < 0.01) velocityX = 0;
if(Math.abs(velocityY) < 0.01) velocityY = 0;
cubeRotationX += velocityX;
cubeRotationY += velocityY;
}
render();
}
render();
```
---
### Explicación:
- Cada cara se dibuja con un `Shape` en tiempo real, dibujando un polígono con sus 4 vértices proyectados.
- La iluminación se calcula con el producto cruz para la normal, que determina el brillo (modula alpha).
- El cubo está dibujado en perspectiva verdadera, por lo que las caras no se superponen sino que se ven correctamente.
- El orden de dibujado (z-order) emplea Painter's algorithm, ordenando de lejos a cerca para que las caras de atrás se dibujen antes.
- La rotación con arrastre del ratón más inercia funciona igual.
---
### Para probar:
1. Borra cualquier código previo.
2. Pega este código en el frame 1, capa 1.
3. Asegúrate que script está en AS3.
4. Publica y prueba arrastrando.
---
Si quieres, puedo ayudarte con el `.fla` si quieres enviarme el archivo o profundidad de proyecto.
---
**Con este código verás un cubo "real" 3D con caras que sí tienen perspectiva, no planos simples escalados.**
---
Avísame cualquier cosa, estaré aquí para ayudarte.