转：目标50行代码之内完成3d编辑器功能

1024程序员节刚过，手痒想实现一个html的3d编辑器，看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>，都觉得太复杂，一个3d编辑器貌似没有几百行代码搞不定。其实还真不是，那就用上次推荐的www.thingjs.com开发平台来试着做一下吧。

目标50行代码之内完成3d编辑器功能。

第一步，先来到thingjs平台的在线开发环境。

三行代码加载了一个默认场景，那就在这个基础上做吧。先把不需要的注释删了。

var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
});
thingjs平台因为封装了底层细节所以能做到快速开发的目的。

第二步，场景加载完成后进入编辑模式

app.on('load', function (ev) {
state = app.stateManager.change('EditObject');
});
第三步，做一个编辑面板，简单一点四个元素，两个模型，一个箭头线和一个管线，像下面这样

代码如下：

// 创建工具条
var toolbar = new THING.widget.Panel({ width: '90px' });
// 绑定物体
var buttonObj = { '卡车': false, '房屋': false, '导线': false, '管线': false, };
var dataObj = {
'卡车': {
i: '#momoda_lc-icontubiao10',
t: "Thing",
u: "https://model.3dmomoda.com/models/262B016FBFC647968DC6F31E13437184/0/gltf/",
},
'房屋': {
i: '#momoda_lc-icontubiao21',
t: "Thing",
u: "https://model.3dmomoda.com/models/378980A961674073BC8C4B935D890B33/0/gltf/",
},
'导线': {
i: '#momoda_lc-icontubiao',
t: "RouteLine",
m: "https://www.thingjs.com/static/images/diffuse.jpg",
},
'管线': {
i: '#momoda_lc-icontubiao10',
t: "PolygonLine",
m: "https://www.thingjs.com/static/images/poly_line_01.png"
}
}
Loader.sync(['lib/iconfont.js'], function () {
for (v in dataObj) {
toolbar.addImageBoolean(buttonObj, v).url(dataObj[v].i);
}
})
解释，因为面板库用到了图标 lib/iconfont.js 所以需要先用Loader.sync先加载图标。

toorlbar.addimage 为添加一个图标按键。发现实现面板的代码比功能逻辑还多~。

最后一步实现按键的创建模型回调

toolbar.on('change', function (a) {
var e = event || window.event;
var object = state.createObject({ type:dataObj[a].t, url: dataObj[a].u, image: dataObj[a].m});
state.startDrag(object, e.clientX, e.clientY, 0);
return false; // 不影响按键状态
});
完整代码如下：总共43行，真的不到50行（拷贝代码到在线开发环境可直接看效果）：

var app = new THING.App({
url: 'https://www.thingjs.com/static/models/storehouse' // 场景地址
});
app.on('load', function (ev) {
state = app.stateManager.change('EditObject');
});
// 创建工具条
var toolbar = new THING.widget.Panel({ width: '90px' });
// 绑定物体
var buttonObj = { '卡车': false, '房屋': false, '导线': false, '管线': false, }
var dataObj = {
'卡车': {
i: '#momoda_lc-icontubiao10',
t: "Thing",
u: "https://model.3dmomoda.com/models/262B016FBFC647968DC6F31E13437184/0/gltf/",
},
'房屋': {
i: '#momoda_lc-icontubiao21',
t: "Thing",
u: "https://model.3dmomoda.com/models/378980A961674073BC8C4B935D890B33/0/gltf/",
},
'导线': {
i: '#momoda_lc-icontubiao',
t: "RouteLine",
m: "https://www.thingjs.com/static/images/diffuse.jpg",
},
'管线': {
i: '#momoda_lc-icontubiao10',
t: "PolygonLine",
m: "https://www.thingjs.com/static/images/poly_line_01.png"
}
}
Loader.sync(['lib/iconfont.js'], function () {
for (v in dataObj) {
toolbar.addImageBoolean(buttonObj, v).url(dataObj[v].i)
}
toolbar.on('change', function (a) {
var e = event || window.event;
var object = state.createObject({ type:dataObj[a].t, url: dataObj[a].u, image: dataObj[a].m});
state.startDrag(object, e.clientX, e.clientY, 0);
return false; // 不影响按键状态
});
});
截屏效果。

后记：

为什么能短短50行就实现html canvas 3d编辑器的效果呢？

因为强大的封装。

做完了怎么给老板看呢？

点上面的演示按键，会出现三种演示方式 1. 电脑，2. 手机，3.iframe（嵌入到自己的页面）。还可以手机访问~，不知道手机访问好不好操作~。

那编辑完之后怎么退出编辑模式呢？

app.stateManager.leave('EditObject')
如果用three.js实现类似的功能需要多少行代码呢？

大概500行。

到底自己开发还是选择库开发？

研究底层技术当然是选自己做，如果是做项目，那还是用平台库来做吧。
————————————————
版权声明：本文为CSDN博主「liuwei000000」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liuwei000000/article/details/83378837

转：目标50行代码之内完成3d编辑器功能相关推荐

50代码HTML5 Canvas 3D 编辑器优雅搞定
1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...
pyquery获取不到网页完整源代码_爬虫神器之PyQuery实用教程（二），50行代码爬取穷游网...
爬虫神器之PyQuery实用教程(二),50行代码爬取穷游网前言上篇文章 PyQuery (一) 回顾.今天来介绍具体 PyQuery 的使用方法. 穷游网目标与分析开始之前,按照之前的套路一步 ...
python跑酷游戏源码_HTML5游戏实战(1)：50行代码实现正面跑酷游戏
前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...
python pyquery不规则数据的抓取_爬虫神器之PyQuery实用教程（二），50行代码爬取穷游网...
爬虫神器之PyQuery实用教程(二),50行代码爬取穷游网前言上篇文章 PyQuery (一) 回顾.今天来介绍具体 PyQuery 的使用方法. 穷游网目标与分析开始之前,按照之前的套路一步 ...
python爬虫实战：利用scrapy，短短50行代码下载整站短视频
近日,有朋友向我求助一件小事儿,他在一个短视频app上看到一个好玩儿的段子,想下载下来,可死活找不到下载的方法.这忙我得帮,少不得就抓包分析了一下这个app,找到了视频的下载链接,帮他解决了这个小问题 ...
python实现50行代码_50行代码实现python计算器主要功能
实现功能:计算带有括号和四则运算的式子 3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层小括 ...
如何用50行代码构建情感分类器
选自Toward Data Science,作者:Rohith Gandhi,机器之心编译. 本文介绍了如何构建情感分类器,从介绍自然语言处理开始,一步一步讲述构建过程. 自然语言处理简介语言把人类 ...
【PyTorch】50行代码实现GAN——PyTorch
本文来源于PyTorch中文网. 一直想了解GAN到底是个什么东西,却一直没能腾出时间来认真研究,前几日正好搜到一篇关于PyTorch实现GAN训练的文章,特将学习记录如下,本文主要包含两个部分:GA ...
利用scrapy，短短50行代码下载整站短视频
一.撕开爬虫的面纱--爬虫是什么,它能做什么爬虫是什么爬虫就是一段能够从互联网上高效获取数据的程序. 我们每天都在从互联网上获取数据.当打开浏览器访问百度的时候,我们就从百度的服务器获取数据,当拿 ...

转：目标50行代码之内完成3d编辑器功能

转：目标50行代码之内完成3d编辑器功能相关推荐

最新文章

热门文章