3D建模巨头Twaver--入门篇2

最新推荐文章于 2024-05-20 10:06:46 发布

快乐是一切

最新推荐文章于 2024-05-20 10:06:46 发布

阅读量1.7k

点赞数 1

分类专栏：前端文章标签： TWaver 三维可视化

本文链接：https://blog.csdn.net/weixin_42600599/article/details/88972928

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

前面讲了twaver的一些基础和第一个简单的demo，对于创建模型更多的例子和样式讲解，在官方的api里面都有详细的说明的了，今天主要的是如何导入自定义的模型和利用官方的自带的模型快速创建一个场景。

导入依赖

想要导入自定义模型，除了需要导入基本的t.js之外，还要导入两个js文件。
index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>index</title>
	<script type="text/javascript" src="libs/t.js"></script>
	<script type="text/javascript" src="libs/twaver.js"></script>
	<script type="text/javascript" src="libs/twaver-make.js"></script>
	<!--自定义的js文件-->
	<script type="text/javascript" src="static/index.js"></script>
</head>
<body onload='init()'>
	<div id="show"></div>
</body>
</html>

这回我将js文件独立出来了，一般来说，程序都应该这样分离。
index.js

var box,network;

function init(){
	// 指定模型库的相对目录
	make.Default.path = './make/';
	// 创建画布
	network = new mono.Network3D();
	box = network.getDataBox();

	// network基础设置
	document.getElementById('show').appendChild(network.getRootView()); // 将画布添加到html的div中
	mono.Utils.autoAdjustNetworkBounds(network,document.documentElement,'clientWidth','clientHeight'); // 设置画布自适应大小
	network.setClearColor('black'); // 设置画布为黑色

	// 设置灯光
	var point = new mono.PointLight(0xffffff,1.5); // 新建一个点光源
	point.setPosition(1000, 10000, 0); // 设置光源位置
	box.add(point);
	box.add(new mono.AmbientLight(0x888888)); // 添加一个环境光

	// 设置相机
	var camera = network.getCamera();
	camera.setPosition(0,5000, 5000); // 设置相机位置
	network.setCamera(camera);
}

以上是一些基础的画布和灯光相机的设置，具体参数和用法参考官方的中文api文档：
文档：http://doc.servasoft.com/twaver-document-center/recommended/twaver-html5-3d-v2/first-mono-app/
api： http://doc.servasoft.com/uploads/mono-api-doc/classes/mono.Node.html#method_setSelected

使用官方自带模型

在申请的试用文件里面，会有一些定义好了的模型，但是好像不全，不过已经有很多了。我的是在twaver-make-1.5.12这个文件夹里面，直接把model和libs这两个文件复制出来，这样我的目录结构就是这样

-|demo
		make
			model    // 复制出来的model文件夹
		libs  // 复制出来的libs文件夹
		res
			img // 贴图资源
		static   // 存放静态文件
			/*index.js
		index.html

index.js文件最开始的时候不是有个指定模型库的相对目录吗，就是指定model这个的位置了，这样导入的时候才能找到模型。

创建围墙

index.js

var box,network;

function init(){
	// 指定模型库的相对目录
	make.Default.path = './make/';
	// 创建画布
	network = new mono.Network3D();
	box = network.getDataBox();

	// network基础设置
	document.getElementById('show').appendChild(network.getRootView()); // 将画布添加到html的div中
	mono.Utils.autoAdjustNetworkBounds(network,document.documentElement,'clientWidth','clientHeight'); // 设置画布自适应大小
	network.setClearColor('black'); // 设置画布为黑色

	// 设置灯光
	var point = new mono.PointLight(0xffffff,1.5); // 新建一个点光源
	point.setPosition(1000, 10000, 0); // 设置光源位置
	box.add(point);
	box.add(new mono.AmbientLight(0x888888)); // 添加一个环境光

	// 设置相机
	var camera = network.getCamera();
	camera.setPosition(0,5000, 5000); // 设置相机位置
	network.setCamera(camera);

	// 创建物体的代码都加在这下面，往下就不再复制上面的代码了
	// 定义模型
	var roomParameters = [
		{ // 地板和外墙
			'id': 'twaver.idc.wall', // 对象id，这里对应的是外墙
			'closed': true, // 是否合并
			'showFloor': true, // 是否显示地板
			'wallHeight': 300, // 墙的高度
			'insideColor': 'white', // 内墙颜色
			'asideColor': 'gray', //外墙颜色
			'insideImage': 'res/img/inside_lightmap.jpg', // 内墙贴图
			'outsideImage': 'res/img/outside_lightmap.jpg', // 外墙贴图
			'repeat': 300, // 重复高度
			'data': [  // 坐标点的位置，一个矩形的四个角点和四个中点，总共八个点的坐标
				[-2500, -1000],
				[0, -1000],
				[2500, -1000],
				[2500, 0],
				[2500, 1000],
				[0, 1000],
				[-2500, 1000],
				[-2500, 0],
				[-2500, -1000] // 第九个是起点的坐标，正好围成一个矩形，
			]
		}
	]
	// 加载模型
	make.Default.load(roomParameters, function(object3d){
		for(var i=0;i<object3d.length;i++){
			var obj = object3d[i];
			box.addByDescendant(obj);
		};
	});
}

注意：
1、模型的参数可以从官方的文档里面找到，注意标点符号一定不能错，最后一个参数结尾不能加逗号。
2、坐标点可以自定义的，就是平面上几个点，围起来形成的图形，加上一定高度，再默认添加地板，就是一个房间了。
3、设置了贴图但是并没有效果，是谷歌浏览器的原因，百度一下谷歌跨域如何解决，就是快捷方式后面加几个参数。

一法通，万法通。会加载一个后，剩下的都一样的方式。

自定义模型

除了使用官方的模型外，还可以将在3dmax或三维扫描仪创建的模型导入在里面。
例如在3dmax里面创建了一个模型，首先将模型导出到model这个文件夹中，导出的格式为obj格式。
然后再twaver里面用
index.js


	// 定义模型
	make.Default.registerObj('self.test', 'test', './model/');
	// 第一个参数是自定义模型的名字，test是保存的obj格式的模型的文件名
	// 第三个参数是模型所在的位置，相对于最开始定义的那个make的目录
	// 加载模型
	make.Default.load('self.test', function(object3d){
		box.addByDescendant(object3d);
	});

自定义的模型先定义，给他赋予一个名字，然后就可以通过这个名字加载到场景里面了。

使用现有模型快速创建场景基本就是这样流程，更详细的官方文档都有说明，有个了解之后就能更容易看懂了。

@快乐是一切

快乐是一切

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
3D建模巨头Twaver--入门篇2

前面讲了twaver的一些基础和第一个简单的demo，对于创建模型更多的例子和样式讲解，在官方的api里面都有详细的说明的了，今天主要的是如何导入自定义的模型和利用官方的自带的模型快速创建一个场景。导入依赖想要导入自定义模型，除了需要导入基本的t.js之外，还要导入两个js文件。index.html<!DOCTYPE html><html><head&gt...
复制链接

扫一扫

专栏目录