这样一簇绚烂丰满艳丽多姿的3D小球花，要多少代码才能完成？其实不足百行，您信吗？下面咱就看一下具体实现过程，让您分分钟学会用TWaver HTML5制作3D拓扑图。

搭建3D空间

首先为花簇的绽放建一个展示的舞台。接触过TWaver2D的都知道，box、network是必不可少的，但对3D场景来说，还远远不够。一是要添加镜头位置，确定我们在什么角度和距离进行观察；二是要加上灯光，否则再美的画面也看不见。灯光分为点光源和环境光，一般来说要一个环境光和若干点光源搭配才能出来好的效果。

var box = new mono.DataBox();

var network= new mono.Network3D(box, null, monoCanvas);

mono.Utils.autoAdjustNetworkBounds(network,document.documentElement,'clientWidth','clientHeight');

network.getCamera().setPosition(0, 0, 4000);

network.isSelectable=function(){return false};

network.setClearColor('black');

var pointLight = new mono.PointLight(0xFFFFFF,0.8);

box.add(pointLight);

var pointLight = new mono.PointLight(0xFFFFFF,0.5);

pointLight.setPosition(500,2000,0);

box.add(pointLight);

box.add(new mono.AmbientLight(0x888888));

创建3D小球花瓣

每一个3D小球就是一个花瓣，是整个花簇的基础部件，也是最容易做的，只要几行代码而已。

function createNode(color){

  //var color = color || '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);

  var node=new mono.Sphere(10,BALL_SEGMENT,BALL_SEGMENT);

  node.s({

    'm.type': 'phong',

    'm.color': color,

    'm.ambient': color,

  });

  return node;

}

其中的BALL_SEGMENT是球体切片数量，数量越大越生成的球体越圆滑，但计算量也就越大。解除注释掉的那条语句将会每次生成一个随机颜色的小球，这种五颜六色的感觉也别有趣味。

生成3D花朵

正如若干花瓣组成一朵小花，我们也要将若干个小球连接在一起。这一步最重要的是花瓣的排列，既要随机有活力，又要规律有造型。实例中是将小球随机排列在一个球面的局部。

function getSpherePoint(r, angle1, angle2){

　　var x=r*Math.sin(angle1)*Math.cos(angle2);

　　var y=r*Math.cos(angle1);

　　var z=r*Math.sin(angle1)*Math.sin(angle2);

　　return new mono.Vec3(x, y, z);

}

有了花瓣的摆放位置，一朵花也就很容易开放了：

function createTree(box, count, range, offset, color){

	var angleStep=Math.PI/50;

	var center=new mono.Sphere(10,BALL_SEGMENT,BALL_SEGMENT);

	center.s({

		'm.type': 'phong',

		'm.color': color,

		'm.ambient': color,

	});

	box.add(center);

	for(var i=0;i<count;i++){

		var node= createNode(color);

		var r=1000;

		var angle1=range*Math.random()/5;

		var angle2=Math.PI*2*Math.random();

		var point=getSpherePoint(r, angle1, angle2);

		point.y-=offset;

		node.setPosition(point);

		node.setParent(center);

		box.add(node);

		box.add(createLink(center, node));

	}

	return center;

}

通过改变其参数，可以开出不同的花朵。其中count是花瓣的数量，range是花朵球面的角度，offset是花瓣到花托的长度，color是花朵的颜色。

绽放3D花簇

剩下的工作就极其简单了，先建一个中心小球，再通过两个循环，就生成了有两层花朵的球状花簇。

 
var center=createNode('red');

box.add(center);

for(var i=0;i<40;i++){

	var angle1=Math.random()*Math.PI;

	var angle2=Math.random()*Math.PI*2;

	var point=getSpherePoint(1000, angle1, angle2);

	var tree=createTree(box, 100, Math.PI*0.4, 800, 'yellow');

	tree.setPosition(point.x, point.y, point.z);

	var rotation=point.rotationTowards(new mono.Vec3(0,1,0), point);

	tree.setRotation(rotation);

	box.add(createLink(center, tree));

}

当然，你可以说这根本不像什么花簇。其实本来也不是要做一个现实的什么东西，只是为了用一段小而美的程序，让大家领略TWaver3D拓扑图的风采。如果您从中get到了什么技能和兴趣，那才是我们的真正目的！

实际上，这个例子稍作变化，就可以用来展示丰富的3D网络拓扑图、各种复杂数据的树状关系图。你一定可以让它绽放的更加美丽！

为了证实代码确实不足百行，特附上完整源码：

<!DOCTYPE html>

<html>

<head>

    <title>Mono Test</title>

    <script type="text/javascript" src = "t.js"></script>

    <script type="text/javascript">

		var BALL_SEGMENT=7;

        function init(){

            var box = new mono.DataBox();

            var network= new mono.Network3D(box, null, monoCanvas);

            mono.Utils.autoAdjustNetworkBounds(network,document.documentElement,'clientWidth','clientHeight');

			network.getCamera().setPosition(0, 0, 4000);

			network.isSelectable=function(){return false};

			network.setClearColor('black');

            var pointLight = new mono.PointLight(0xFFFFFF,0.8);

            box.add(pointLight);

    		var pointLight = new mono.PointLight(0xFFFFFF,0.5);

            pointLight.setPosition(500,2000,0);

            box.add(pointLight);

            box.add(new mono.AmbientLight(0x888888));

			var center=createNode('red');

			box.add(center);

			for(var i=0;i<10;i++){

				var angle1=Math.random()*Math.PI;

				var angle2=Math.random()*Math.PI*2;

				var point=getSpherePoint(300, angle1, angle2);

				var tree=createTree(box, 100, Math.PI*0.6, 700, '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6));

				tree.setPosition(point.x, point.y, point.z);

				var rotation=point.rotationTowards(new mono.Vec3(0,1,0), point);

				tree.setRotation(rotation);

				box.add(createLink(center, tree));

			}

			for(var i=0;i<40;i++){

				var angle1=Math.random()*Math.PI;

				var angle2=Math.random()*Math.PI*2;

				var point=getSpherePoint(1000, angle1, angle2);

				var tree=createTree(box, 100, Math.PI*0.4, 800);

				tree.setPosition(point.x, point.y, point.z);

				var rotation=point.rotationTowards(new mono.Vec3(0,1,0), point);

				tree.setRotation(rotation);

				box.add(createLink(center, tree));

			}

		}

		function createTree(box, count, range, offset, color){

			var angleStep=Math.PI/50;

			var center=new mono.Sphere(10,BALL_SEGMENT,BALL_SEGMENT);

			center.s({

				'm.type': 'phong',

				'm.color': color,

				'm.ambient': color,

			});

			box.add(center);

			for(var i=0;i<count;i++){

				var node= createNode(color);

				var r=1000;

				var angle1=range*Math.random()/5;

				var angle2=Math.PI*2*Math.random();

				var point=getSpherePoint(r, angle1, angle2);

				point.y-=offset;

				node.setPosition(point);

				node.setParent(center);

				box.add(node);

				box.add(createLink(center, node));

			}

			return center;

		}

		function getSpherePoint(r, angle1, angle2){

			var x=r*Math.sin(angle1)*Math.cos(angle2);

			var y=r*Math.cos(angle1);

			var z=r*Math.sin(angle1)*Math.sin(angle2);

			return new mono.Vec3(x, y, z);

		}

		function createNode(color){

			var color = color || '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);

			var node=new mono.Sphere(10,BALL_SEGMENT,BALL_SEGMENT);

			node.s({

				'm.type': 'phong',

				'm.color': color,

				'm.ambient': color,

			});

			return node;

		}

		function createLink(node1, node2){

			var link=new mono.Link(node1, node2);

			link.s({

				'm.transparent': true,

				'm.opacity': 0.2,

			});

			return link;

		}

    </script>

</head>

<body onload = 'init()'>

    <div>

        <canvas id="monoCanvas"/>

    </div>

</body>

</html>

TWaver3D入门探索——3D拓扑图之绽放的小球花的更多相关文章

  1. TWaver3D入门探索——3D拓扑图之人在江湖

    俗话说,有人的地方就有江湖,江湖就是帮派林立错综复杂的关系网.今天我们就来展示这样一个小小的江湖. 故事背景 崇祯末年,民不聊生,烽烟四起-- 江湖都是有背景的,我们的3D江湖也需要一个背景.江湖就是 ...

  2. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  3. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）

    今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 De ...

  4. 通过 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（二）

    我们上一篇<基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)>主要讲解了如何搭建一个实时数据通讯服务器,客户端与服务端是如何通讯的,相信通过上一篇的讲解,再配 ...

  5. Cesium入门10 - 3D Tiles

    Cesium入门10 - 3D Tiles Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ 我们团队有时把Ces ...

  6. cesium编程入门(七)3D Tiles，模型旋转

    cesium编程入门(七)3D Tiles,模型旋转 上一节介绍了3D Tiles模型的位置移动,和贴地的操作,这一节来聊一聊模型的旋转, 参考<WebGl编程指南>的第四章 假设在X轴和 ...

  7. 利用 HTML5 WebGL 构建的 3D 拓扑图

    现在,3D 模型已经用于各种不同的领域.在医疗行业使用它们制作器官的精确模型:电影行业将它们用于活动的人物.物体以及现实电影:视频游戏产业将它们作为计算机与视频游戏中的资源:在科学领域将它们作为化合物 ...

  8. SharePoint 2013开发入门探索（二）- 列表操作

    我们如何用代码对SharePoint列表做些例如增删改查的操作呢?如果您的程序可以部署到服务器上,就可以使用 服务器对象模型,因为服务器对象模型提供的功能最多,限制最少:否则可能要选择客户对象模型等其 ...

  9. SharePoint 2013开发入门探索（一）- 自定义列表

    在SharePoint 2013中创建自定义列表的方式有很多,在网站内容页面添加应用程序就可以创建(站点内容-〉 您的应用程序),也可以通过SharePoint Designer 2013创建,而本文 ...

随机推荐

  1. iOS 视频开发-AVPlayer

    如果我只是简单的播放一个视频,而不需要考虑播放器的界面.iOS9.0 之前使用 MPMoviePlayerController, 或者内部自带一个 view 的 MPMoviePlayerViewCo ...

  2. MyBatis(3.2.3) - Configuring MyBatis using XML, Settings

    The default MyBatis global settings, which can be overridden to better suit application-specific nee ...

  3. 使用iTextSharp来填充PDF模板文件

    需求简介:     遇到了这样一个需求:某公司需要为所有用户的培训生成一个培训记录,过程如下:     (1)用户在培训完之后会进入到一个填写信息的界面.     (2)用户填写信息.     (3) ...

  4. 如何查看Windows8.1计算机体验指数评分

    如果你已经安装使用了Windows 8.1,你就会发现自从Vista时代开始的计算机体验评分消失了,在文章<微软取消Windows 8 计算机评分功能>中,我猜测了微软取消评分功能的可能原 ...

  5. Swift内存管理-示例讲解

    具体而言,Swift中的ARC内存管理是对引用类型的管理,即对类所创建的对象采用ARC管理.而对于值类型,如整型.浮点型.布尔型.字符串.元组.集合.枚举和结构体等,是由处理器自动管理的,程序员不需要 ...

  6. Cocos2d-x开发实例：单点触摸事件

    下面我们通过一个实例详细了解一下,层中单点触摸事件的实现过程.感受一下它的缺点和优点.该实例场景如下图所示,场景中有两个方块精灵,我们可以点击和移动它们.   下面我们看看HelloWorldScen ...

  7. Cocoa框架中的内存分区

    NSObject对象类实例为我们提供了两种分配内存的方式:alloc和allocWithZone:.alloc的实现也是为了调用allocWitZone:,它传入了一个默认的zone.所以明确的说,N ...

  8. signal信号类型列表

    Linux支持的信号列表如下.很多信号是与机器的体系结构相关的 信号值 默认处理动作 发出信号的原因 SIGHUP 1 A 终端挂起或者控制进程终止 SIGINT 2 A 键盘中断(如break键被按 ...

  9. 移植FastBlur模糊算法至SDL

    FastBlur是Android标配的模糊算法,这也在当时引起了一股毛玻璃热潮.IOS7就采用了此算法(这有抄袭Android之嫌,因为Android1.5就在标库中加入了此函数).算法效率很高,这也 ...

  10. ASP.NET MVC3 使用kindeditor编辑器获取不到值

    做开发真的是会遇到各种问题,如果不亲自尝试,不动手,很难发现问题. 下面我们说下在MVC中的用法 1,首先引入js文件 <script type="text/javascript&qu ...