/ Published in: Other
Expand |
Embed | Plain Text
/* ここから */ /* リンケージimage0〜image5の画像を用意 */ Stage.scaleMode = 'noScale'; // 3D rotation is defined by an object // which has rotation values for each axis var rotations = {x:0, y:0, z:0}; // The points within the cube are defined // in an array called boxPoints var boxPoints = [ {x:-50, y:-50, z:-50}, {x:50, y:50, z:-50}, {x:-50, y:50, z:-50}, {x:-50, y:-50, z:50}, {x:50, y:-50, z:50}, {x:50, y:50, z:50} ]; /* Points 3 - 4 / /| 0 - 5 | |/ 2 - 1 Notice that 2 points are missing, one in the front upper right and one in the back lower left. These are not needed since each side only requires 3 points to define its place in 3D space. Depending on intented image orientation, though, these points may be necessary for your images to go and face where you want them to */ // create a movie clip for the cube to reside // place it in the center of the screen this.createEmptyMovieClip("theScene", 1); theScene._x = theScene._y = 150; // generate each image for the cube createImages(); // define enter frame event for rotating cube and // positioning images within it theScene.onEnterFrame = function(){ // adjust axis rotations based on mouse position rotations.x -= this._ymouse/2000; rotations.y += this._xmouse/2000; // transform original 3D points to 2D based on rotations var points2d = pointsTransform(boxPoints, rotations); // for each image clip, use movieClip3PointTransform // to alter its transform matrix so that it matches to // 3 points within points2d movieClip3PointTransform(this.image0, points2d[2], points2d[0], points2d[3]); movieClip3PointTransform(this.image1, points2d[5], points2d[1], points2d[2]); movieClip3PointTransform(this.image2, points2d[0], points2d[2], points2d[1]); movieClip3PointTransform(this.image3, points2d[4], points2d[3], points2d[0]); movieClip3PointTransform(this.image4, points2d[3], points2d[4], points2d[5]); movieClip3PointTransform(this.image5, points2d[1], points2d[5], points2d[4]); } // create images as empty movie clips. Each contains another // empty movie clip in which each bitmap is attached. Using this // inner movie clip, any sized bitmap can be used and it will // stil conform to the size needed in the cube as this clip // is referenced in movieClip3PointTransform. function createImages(){ // for each side var i = 6; while(i--){ // create an image movie clip theScene.createEmptyMovieClip("image"+i, i); // create a contents clip theScene["image"+i].createEmptyMovieClip("contents", i); // attach the appropriate bitmap in the contents clip theScene["image"+i].contents.attachBitmap( flash.display.BitmapData.loadBitmap("image"+i), 1, false, true ); } } // transforms 3d points into 2d points based // on the rotation values provided function pointsTransform(points, rotations){ var tpoints = new Array(); var sx = Math.sin(rotations.x); var cx = Math.cos(rotations.x); var sy = Math.sin(rotations.y); var cy = Math.cos(rotations.y); var sz = Math.sin(rotations.z); var cz = Math.cos(rotations.z); var x,y,z, xy,xz, yx,yz, zx,zy; var i = points.length; while (i--){ x = points[i].x; y = points[i].y; z = points[i].z; // rotation around x xy = cx*y - sx*z; xz = sx*y + cx*z; // rotation around y yz = cy*xz - sy*x; yx = sy*xz + cy*x; // rotation around z zx = cz*yx - sz*xy; zy = sz*yx + cz*xy; tpoints[i] = {x:zx, y:zy}; } return tpoints; } // this function sets the transform for the image movie clips // each a, b, c, and d of the transform matrix are simply // based on the difference of positions of the points // they need to match with. The image movie clips' contents // sizes are required to determine how much of that difference // is actually applied to make the transform match function movieClip3PointTransform(mc, a,b,c){ // deterimine visibility mc._visible = pointsIsVisible(a,b,c); // if not visible, exit function if (!mc._visible) return; // set values for matrix using point b as top left var m = mc.transform.matrix; m.tx = b.x; m.ty = b.y; m.a = (a.x - b.x)/mc.contents._width; m.b = (a.y - b.y)/mc.contents._width; m.c = (c.x - b.x)/mc.contents._height; m.d = (c.y - b.y)/mc.contents._height; mc.transform.matrix = m; } // using a 2D relationship between 3 points // determine if a 3D face is visible function pointsIsVisible(a,b,c){ var db = b.x - a.x; if (!db) return (a.y > b.y == c.x > a.x); var dc = c.x - a.x; if (!dc) return (a.y > c.y == b.x < a.x); return ((b.y-a.y)/db < (c.y-a.y)/dc) != (a.x < b.x == a.x > c.x); }
You need to login to post a comment.
