3D建模巨头Twaver--入门篇2
前面讲了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这两个文件复制出来,这样我的目录结构就是这样
-|demomakemodel // 复制出来的model文件夹libs // 复制出来的libs文件夹resimg // 贴图资源static // 存放静态文件/*index.jsindex.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);});
自定义的模型先定义,给他赋予一个名字,然后就可以通过这个名字加载到场景里面了。
使用现有模型快速创建场景基本就是这样流程,更详细的官方文档都有说明,有个了解之后就能更容易看懂了。
@快乐是一切
3D建模巨头Twaver--入门篇2相关推荐
- 让3D建模新手快速入门Zbrush的16个技巧
刚接触ZBrush软件的朋友,总会在实践中遇到这样或那样的问题,本文将对ZBrush常见问题(十六个)做一个总结,以便新手朋友能快速入门. 1. 介绍 ZBrush保存时是一个画面,要保持三维物体的可 ...
- 次世代Maya角色建模技巧,3D建模新生高效入门
①把背景放到Front视图里对齐中线.polygon-creat polygon tool,勾出大致体型,头.身体.腿和头发要分开勾.只要勾出一半,另一半用Instance复制. ②在勾出的平面多边形 ...
- 次世代3D建模学习的入门方法,个人学习的感悟,萌新小白不要错过!
每个人都想学好次世代,至少来这个部落看的人大部分都是想学好次世代,游戏建模,但事实总是那么残酷,看着别人学那么好,自己还在原地徘徊,想放弃的人都有,学什么都一样,至少要走对方法,有目标目的的学习,而不 ...
- 三维重建入门学习————建模软件Blender入门篇
背景介绍 关于近期在进行三维重建相关算法学习的时候,学得越深,发现对各个方面的知识要求得越多,之前是补了相机的拍照原理,成像原理知识,再后来还补了主流的点提取.匹配算法等等.到了最近,论文,抑或是其他 ...
- 掌握这个学习方法,让3d建模 不再从入门到放弃
游戏建模都要到哪些软件? Maya,即Autodesk Maya是美国Autodesk公司出品的世界顶级的三维动画软件,应用对象是专业的影视广告,角色动画,电影特技等.Maya功能完善 ,工作灵活,易 ...
- 速取,3D建模速成入门到高级教程(附软件安装包)
同名公号回复"入门资料"获取3D建模速成入门到高级教程 大家好,我是华维导师,从事游戏建模师已有10年,曾参与过腾讯<漫威>,<魂斗罗>.网易<阴阳师 ...
- 3D建模老师告诉你没学历没基础怎么学3D建模
游戏.影视的发展,很多少小伙伴来咨询小编,想入行3D建模行业,自己却又没有学历,专业基础,不知道能不能会学,今天潭州教育3D建模老师通过这篇文章告诉大家怎么样去学. 学历不高 现在很多用人单位在招人时 ...
- 适合新手的3d建模软件,你知道几个?
许多新手小白刚开始接触3D建模行业时,肯定是非常迷茫的.首先,不知道学习3D建模用什么软件好?就目前市场上,PC端的3D建模软件太多了:室内设计的,三维动画的.角色模型的等等,每对应的不同行业就有不同 ...
- 3D MAX入门篇(1)常用快捷命令及两种基础建模方式
3D MAX入门篇(1)常用快捷命令及两种基础建模方式 基于图片的对程型模型----画线式建模 1.在界面画一个平面 2.调整平面大小,确认与要插入的图片尺寸一样 3.通过添加样条线绘制出模型的一半 ...
最新文章
- 翻译:MariaDB RENAME TABLE语句
- 超级计算机的生产流程,精密陶瓷的生产流程分为几个步骤(图)
- 在图形化界面中为Ubuntu18.04更新源
- Codeigniter Grid 使用方法 (flexigrid)
- SQL执行效率提升几万倍的操作详解!
- push_back模式工作
- Android 使用SQLiteDatabase操作SQLite数据库(二)
- J2EE(环境搭建)
- 埃加洛尔虚拟服务器,致我终将逝去的二区:新一轮大服务器实装
- iNode用户win10开热点手机连接时总显示获取IP中的解决方法
- JavaScript验证 IP/域名格式
- 唐仲英基金会:从“钢铁大王”到“十大慈善家”,他的一生如此传奇
- B、M、MB、K、KB、G、GB的关系
- winform 如何让 comboBox1 不能输入,只能下拉选择
- 数据库的设计步骤(好文)
- dmesg 命令详解
- CDMA sid, nid, bid 含义解释
- SpringBoot入门到精通-SpringBoot启动流程(七)
- 按一定规律将电文变成密码: 将字母A变为E、将字母a变为e,即变成其后的第四个字母,W将变成A。字母按上述规律转换,非字母字符不变。输入一行字符,输出相应密码。
- 怪异模式和标准模式的定义和区别