Web3D - 实时3D技术在Flash中的应用

Flash Player文件

点击打开/折叠播放器

[ 08-08-29 ] 更新的SWF动画，加入了飘动的云层效果。

好久没什么新鲜作品了，今天放出一个来。上面这个flash有点大，点开后要等一下才能看到。1.44MB，没做loading。不过我想99%的网民还没见过这样的flash吧，所以值得一等。

在IE里不用特别的插件就实现实时3D，这在不久之前还是个幻想。德国一家公司推出过一整套Web3D解决方案。不过都是用java实现的。普通用户浏览还需要安装一个7MB的插件。现在这年头你敢随便装插件吗？反正我是不敢。

另一个解决方案是Director+Shockwave Player。中文网站上现在还能找到几篇年代久远的Director 3D的教程。但真正精彩的应用我在中文区还一个都没找到。加拿大一家公司将此技术应用在e-Learning领域，做的非常精彩。

Shockwave Player相对普及一些了，但仍然不是每个网民都会装这个。那么有哪个web插件最普及呢？每个TX都会异口同声的回答 FLASH~~ 没错。想过用Flash开发CS射击y游戏吗？看似遥不可及，但其实已经不远了。Adobe在收购Macromedia之后，已经悄悄在flashplayer v9里加入了3D支持。有很多传言声称Adobe为了升级Flash Player 10一直在和一些比较知名的Flash 3D引擎开发团队合作。以便在下一个版本中全面扩充3D功能，并且和这些团队现有的程序保持兼容。

说到这里，比较专业的朋友应该已经能够嗅到一场新的风暴即将到来。这将会是一个非常广阔的领域。

Web will never be the same...

3D Flash的前景暂时先聊到这儿，回过头说说上面那个Flash。在Flash中导入了一些贴图，只用了一帧。外加3D引擎和一段程序来描述场景和贴图位置。

想亲手试验的朋友，可以到 flash-3d.org去看看，那边有我刚刚翻译的 制作过程详细说明。

源代码如下

import away3d.containers.*;
import away3d.core.base.*;
import away3d.primitives.*;
import away3d.materials.*;
import away3d.core.utils.Cast;
import away3d.cameras.*;
// import some filters we'll use later
import flash.filters.BitmapFilter;
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
import flash.filters.GradientGlowFilter;


// variables
var move:Boolean = false;
var lastPanAngle:Number;
var lastTiltAngle:Number;
var lastMouseX:Number;
var lastMouseY:Number;
var skies:Sphere;


// Set the scene
var scene:Scene3D = new Scene3D();


// Create and set up the camera
var camera:HoverCamera3D = new HoverCamera3D({zoom:2, focus:200, distance:400});
camera.targetpanangle = camera.panangle = -180;
camera.targettiltangle = camera.tiltangle = 15;
camera.yfactor = 1;
var view:View3D = new View3D({scene:scene, camera:camera});
//var view:View3D = new View3D({scene:scene, camera:camera, renderer:Renderer.BASIC});
//var view:View3D = new View3D({scene:scene, camera:camera, renderer:Renderer.CORRECT_Z_ORDER});
// Add viewport to the Flash display list so it's visible
addChild(view);
// Adjust view
view.x = 230;
view.y = 200;



var globe:Sphere = new Sphere({material:"blue#white",radius:150,segmentsH:18, segmentsW:26});
view.scene.addChild(globe);
view.render();


// interactive
function MouseDown(event:MouseEvent):void
{
    lastPanAngle = camera.targetpanangle;
    lastTiltAngle = camera.targettiltangle;
    lastMouseX = stage.mouseX;
    lastMouseY = stage.mouseY;
    move = true;
}

function MouseUp(event:MouseEvent):void
{
    move = false;
}


function onEnterFrame(e:Event):void
{   
// rerender viewport   
    var cameraSpeed:Number = 0.3; // Approximately same speed as mouse movement.   
  if (move) { 
  camera.targetpanangle = cameraSpeed*(stage.mouseX - lastMouseX) + lastPanAngle;
        camera.targettiltangle = cameraSpeed*(stage.mouseY - lastMouseY) + lastTiltAngle;
    }   
    camera.hover();
      view.render();
}

addEventListener(Event.ENTER_FRAME, onEnterFrame);
stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);


globe.material = new BitmapMaterial(Cast.bitmap("earthmap1k.jpg"));


//skies = new Sphere({material:"earthcloudmap.png",radius:153,segmentsH:18, segmentsW:26});
//scene.addChild(skies);
globe.material = new BitmapMaterial(Cast.bitmap("earthmap1k.png"));


var heavens:Sphere = new Sphere({material:"star_map_small.jpg",radius:1200,x:0,y:0,segmentsH:9, segmentsW:9});
view.scene.addChild(heavens);

heavens.invertFaces();

var sun = new Sphere({material:"sunmap.jpg",radius:50,x:150,y:100,z:600,segmentsH:6, segmentsW:6});
view.scene.addChild(sun);

var newMaterial:BitmapMaterial = new BitmapMaterial(Cast.bitmap("earthmap1k_night_day.png"));
globe.material = newMaterial;


//atmosphere
var myFilter1:Array = new Array()
myFilter1.push(new GlowFilter(0xFFFFAA, 1, 25, 25, 3, 1, false, false));
sun.ownCanvas=true;
sun.filters=myFilter1;
var myFilter2:Array = new Array()
myFilter2.push(new GlowFilter(0xFFFFFF, 0.4, 15, 15, 2, 1, false, false));
globe.ownCanvas=true;
globe.filters=myFilter2;

感谢代码原作者Jens C Brynildsen！