TWaver阶段学习-入门篇

这段时间在学习了解TWaver这个3D建模的框架,下面是对这段时间学习成果的一个总结,也为自己梳理一下知识点。

TWaver介绍

TWaver是美国Serva Software公司的产品,是全球范围内先进的可视化管理软件,可以直接使用,也可根据需求二次开发,在电信、金融、交通等领域都有广泛应用。
主要就是能快速构建一个3D的交互式场景,能够方便快捷的管理电信服务器,电力工厂等。
更加详细的介绍请:百度百科。

创建第一个场景

环境配置

TWaver使用需要在官方下载试用文件,基础使用的话包含了 t.js, twaver.js, twaver-make.js三个文件。
这些在TWaver的官方网站上面提交申请,就可以下载使用,值得注意的是,填写的邮箱必须是付费的企业邮箱这些,然后他会把你需要的文件的下载链接发送到你填写的邮箱中,可能需要等到一段时间,我就等了差不多满24小时才收到邮件。
得到试用的sdk后,就可以根据他的官方 api文档 来一步步创建demo了。
首先创建一个文件夹 first_demo,在得到的试用文件中,解压后找到libs这个文件夹,里面一般就包含有这三个js文件的一到三个。吧t.js这个文件复制到first_demo这个文件夹内,然后再创建index.html这个文件写程序的主体内容。
index.html



<html>
<head>
	<title>3d模型title>
	
	<script type="text/javascript" src="t.js">script>
	<script type="text/javascript">
		
		function init(){
			// 创建数据容器, 所有的数据对象都是放在这里面。
			var box = new mono.DataBox();
			// 创建舞台, 第一个参数是数据容器,第二个参数是场景相机,第三个参数是画布id
			var network = new mono.Network3D(box, null, MyCanvas);
			// 创建一个正方体
			var cube = new mono.Cube(100, 100, 100);
			// 设置正方体的样式
			cube.s({
				'm.color': 'orange', //设置颜色
			});
			// 把这个正方体对象添加到数据容器中
			box.add(cube);

		}
	script>
head>
<body onload="init()">
	<canvas id="MyCanvas" width="500" height="500">canvas>
body>
html>

我们在浏览器中打开这个文件,就可以看到在网页的左上角出现了一个橘黄色的正方体了。
注意:浏览器版本过低,或不支持H5绘图的话,会显示不出来。

详细说明

上面创建一个场景主要有2个方面

1. 舞台

要显示一个酷炫的3D模型,首先得要有一个显示的舞台,canvas这个标签是H5支持的3D显示的标签,内容可以显示在这个上面,然后network这个就是TWaver控制舞台属性的。比如想让舞台边成蓝色就可以这样设置一下network.ClearColor('blue')

2.数据

有舞台了,还得有显示的东西,所有显示的对象都是放在DataBox里面的,我们创建好了一个物体之后,就可以调用 add() 这个方法把这个物体添加到数据容器里面,这样才会在舞台上面显示出来。

创建一个最小的demo就是这样了~
如果需要上面的几个js文件的话,可以留言,仅供学习。
(@快乐是一切)[https://blog.csdn.net/weixin_42600599]

你可能感兴趣的:(前端)