//加载场景代码 var app = new THING.App({ // 场景地址 "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/管线演示 2", //背景设置 "skyBox": "BlueSky" });
app.on('load', function () { //摄像机位置初始化 app.camera.position = [0.4374202706634094, 101.92917348318593, 97.06808820543526]; app.camera.target = [52.75056074670042, -18.885239034825123, -20.619558480451797]; new THING.widget.Button('水管演示', water); new THING.widget.Button('电线演示', electric); new THING.widget.Button('燃气演示', gas); });function water() { } function electric() { } function gas() { }
var line = null; function buildLine(points, color) { line = app.create({ type: 'PolygonLine', points: points, style: { color: color, } }); line.scrollUV = true; }function water() { var waterUnderPoints = []; buildingOpacity(0.3); app.query(/building_0/).forEach( function (parentObj) { var points = []; points.push(parentObj.selfToWorld([5, -0.8, 0])); waterUnderPoints.push(points[0]); for (var i = 3; i <= 24; i += 3) { points.push(parentObj.selfToWorld([5, i, 0])); points.push(parentObj.selfToWorld([5, i, 3])); points.push(parentObj.selfToWorld([-5, i, 3])); points.push(parentObj.selfToWorld([-5, i, -3])); points.push(parentObj.selfToWorld([5, i, -3])); points.push(parentObj.selfToWorld([5, i, 0])); } points.push(parentObj.selfToWorld([5, 24, 0])); buildLine(points, '#0000FF'); } ); waterUnderPoints.push([15.32711, -0.79, -55.655339999999999]); buildLine(waterUnderPoints, '#0000FF'); //renderOrder(); }
function buildingOpacity(num) { app.query("*").forEach(function (obj) { obj.style.opacity = num; }); }
function renderOrder(){ app.query('.PolygonLine').forEach( function (obj) { obj.renderOrder = -10000; } ); }
function electric() { var electricUnderPoints = []; buildingOpacity(0.3); app.query(/building_0/).forEach( function (parentObj) { var points = []; points.push(parentObj.selfToWorld([3, -0.8, 0])); electricUnderPoints.push(points[0]); for (var i = 3; i <= 24; i += 2.5) { points.push(parentObj.selfToWorld([3, i, 0])); points.push(parentObj.selfToWorld([-3, i, 2])); } points.push(parentObj.selfToWorld([3, 24, 0])); buildLine(points, '#00FF00'); console.log(points); } ); electricUnderPoints.push([16.690666, -0.79, -55.115203999999999]); buildLine(electricUnderPoints, '#00FF00'); renderOrder(); }function gas() { var gasUnderPoints = []; buildingOpacity(0.3); app.query(/building_0/).forEach( function (parentObj) { var points = []; points.push(parentObj.selfToWorld([-6.2, -0.3, 0])); gasUnderPoints.unshift(points[0]); for (var i = 3; i <= 24; i += 3) { points.push(parentObj.selfToWorld([-6.2, i, 0])); points.push(parentObj.selfToWorld([-6.2, i, 2])); points.push(parentObj.selfToWorld([6.2, i, 2])); points.push(parentObj.selfToWorld([6.2, i, -2])); points.push(parentObj.selfToWorld([-6.2, i, -2])); points.push(parentObj.selfToWorld([-6.2, i, 0])); } points.push(parentObj.selfToWorld([-6.2, 24, 0])); buildLine(points, '#FF0000'); console.log(points); } ); gasUnderPoints.unshift([22.963023600000003, -0.3, 57.8305784]); buildLine(gasUnderPoints, '#FF0000'); renderOrder(); }
//加载场景代码 var app = new THING.App({ // 场景地址 "url": "http://www.thingjs.com/./uploads/wechat/oLX7p05lsWJZUIxnIWsNXAzJ40X8/scene/管线演示 2", //背景设置 "skyBox": "BlueSky" });app.on('load', function () { //摄像机位置初始化 app.camera.position = [0.4374202706634094, 101.92917348318593, 97.06808820543526]; app.camera.target = [52.75056074670042, -18.885239034825123, -20.619558480451797];
new THING.widget.Button('水管演示', water); new THING.widget.Button('电线演示', electric); new THING.widget.Button('燃气演示', gas);
});
function water() { var waterUnderPoints = []; buildingOpacity(0.3); app.query(/building_0/).forEach( function (parentObj) { var points = []; points.push(parentObj.selfToWorld([5, -0.8, 0])); waterUnderPoints.push(points[0]); for (var i = 3; i <= 24; i += 3) { points.push(parentObj.selfToWorld([5, i, 0])); points.push(parentObj.selfToWorld([5, i, 3])); points.push(parentObj.selfToWorld([-5, i, 3])); points.push(parentObj.selfToWorld([-5, i, -3])); points.push(parentObj.selfToWorld([5, i, -3])); points.push(parentObj.selfToWorld([5, i, 0])); } points.push(parentObj.selfToWorld([5, 24, 0])); buildLine(points, '#0000FF'); } ); waterUnderPoints.push([15.32711, -0.79, -55.655339999999999]); buildLine(waterUnderPoints, '#0000FF'); renderOrder(); }
function electric() { var electricUnderPoints = []; buildingOpacity(0.3); app.query(/building_0/).forEach( function (parentObj) { var points = []; points.push(parentObj.selfToWorld([3, -0.8, 0])); electricUnderPoints.push(points[0]); for (var i = 3; i <= 24; i += 2.5) { points.push(parentObj.selfToWorld([3, i, 0])); points.push(parentObj.selfToWorld([-3, i, 2])); } points.push(parentObj.selfToWorld([3, 24, 0])); buildLine(points, '#00FF00'); console.log(points); } ); electricUnderPoints.push([16.690666, -0.79, -55.115203999999999]); buildLine(electricUnderPoints, '#00FF00'); renderOrder(); }
function gas() { var gasUnderPoints = []; buildingOpacity(0.3); app.query(/building_0/).forEach( function (parentObj) { var points = []; points.push(parentObj.selfToWorld([-6.2, -0.3, 0])); gasUnderPoints.unshift(points[0]); for (var i = 3; i <= 24; i += 3) { points.push(parentObj.selfToWorld([-6.2, i, 0])); points.push(parentObj.selfToWorld([-6.2, i, 2])); points.push(parentObj.selfToWorld([6.2, i, 2])); points.push(parentObj.selfToWorld([6.2, i, -2])); points.push(parentObj.selfToWorld([-6.2, i, -2])); points.push(parentObj.selfToWorld([-6.2, i, 0])); } points.push(parentObj.selfToWorld([-6.2, 24, 0])); buildLine(points, '#FF0000'); console.log(points); } ); gasUnderPoints.unshift([22.963023600000003, -0.3, 57.8305784]); buildLine(gasUnderPoints, '#FF0000'); renderOrder(); }
/************************************************************************
function buildingOpacity(num) { app.query("*").forEach(function (obj) { obj.style.opacity = num; }); }
function renderOrder(){ app.query('.PolygonLine').forEach( function (obj) { obj.renderOrder = -10000; } ); }
var line = null; function buildLine(points, color) { line = app.create({ type: 'PolygonLine', points: points, style: { color: color, } }); line.scrollUV = true; }
1
randyo 2018-12-22 16:08:01 +08:00 via Android
大神啊! Mark
|
2
xiangbulala OP @randyo 试试 thingjs...简单~~
|
3
randyo 2018-12-22 16:52:02 +08:00 via Android
@xiangbulala 可视化有什么好的教程吗
|
4
xiangbulala OP @randyo 3D 的话 three.js 啊,three.js 学起来门槛比较高,也可以试试 thingjs
腾讯课堂教程: https://ke.qq.com/course/list/webgl?tuin=1022909f 优酷搜一下 thingjs 有不少项目案例的视频 |
5
momocraft 2018-12-22 17:42:50 +08:00
原来 thingjs 是做这个的, 最近在知乎常看到广告
|
6
7gugu 2018-12-22 18:04:32 +08:00
dalao,那个管线的位置要怎么确定?是有软件可以导入还是计算出来?
|
7
randyo 2018-12-22 21:36:22 +08:00 via Android
@xiangbulala 谢谢了
|
8
Geeker 2018-12-22 23:36:11 +08:00
模型建的好
|
9
izoabr 2018-12-23 01:47:09 +08:00
demo 是不是挂了?
|
10
yesiamloki 2018-12-23 11:58:37 +08:00
请问能做缓冲区分析吗
|
11
xiangbulala OP @momocraft 还有 V2EX 啊~~
|
12
xiangbulala OP @Geeker 公开了一批模型可以直接用~
|
13
xiangbulala OP @yesiamloki 现在还没有专门的这个功能,不过可以通过 API 实现
|
14
xiangbulala OP @yesiamloki 可以关注一下 thingjs 的[citybuilder]( http://www.thingjs.com/guide/?m=city),3D 城市的可视化工具,目前还比较简单,迭代演进中,欢迎提提意见
|
15
xiangbulala OP |
16
lyseky 2019-01-05 10:32:54 +08:00
想学,国内教程太少了
|
17
xiangbulala OP @lyseky thingjs 把 three.js 封装了,基本上懂 js 就能搞定,bilibili 有视频教程: https://www.bilibili.com/video/av37691017
|
18
eurokingbai2 2019-01-05 11:29:33 +08:00
safari 不显示,chrome 卡到带不动。。
|
19
dd0754 2019-01-05 14:05:07 +08:00
卧槽
|
20
xieguanglei 2019-01-05 14:42:33 +08:00 1
难得看到 V2 上有 WebGL 相关的帖子,借楼插个广告吧: https://alibaba.github.io/G3D/cn/
一个小巧精致的材质渲染引擎,和 three.js 的定位有些类似,但是更小,更专注于「渲染」这件事本身,把渲染引擎对 DOM API 的依赖完全地解耦出来了。 目前还处于项目的早期,欢迎对 WebGL 感兴趣,而且有一定技术实力的同学加入一起共建。 |
21
xiangbulala OP @eurokingbai2。。。啥配置...
|
22
ala2008 2019-01-05 15:28:16 +08:00
@xieguanglei 已 star :smile:
|
23
hello20019 2019-01-05 15:53:06 +08:00 via iPhone
手机上打不开…… chrome 和 safari 都会页面崩溃
|
24
xiangbulala OP |
25
hello20019 2019-01-05 16:09:01 +08:00 via iPhone
@xiangbulala ios 上 chrome 和 safari 都会崩溃
https://i.loli.net/2019/01/05/5c3066024c0a2.png https://i.loli.net/2019/01/05/5c30660394318.png |
26
dk7952638 2019-01-05 16:42:28 +08:00
ThingJS 有开源替代品么?
|
27
xiangbulala OP @dk7952638 (〃'▽'〃)现在 thingjs 不开源,不过除了项目发布都是免费的,收费主要是去 logo,离线部署
|
28
xiangbulala OP @hello20019 嗯 确实 iPhone 上有些问题,会尽快修复
|
29
pinghai 2019-01-05 18:29:02 +08:00
试用试用 ThingJS,不断提升国内 WebGL 引擎水平啊..
|
30
lyseky 2019-01-05 18:40:38 +08:00 via Android
@xiangbulala 好,今年学一下
|
31
but0n 2019-01-05 18:43:00 +08:00 via iPhone
@xieguanglei 不依赖 DOM API 是什么意思?
|
32
majilei 2019-01-05 19:05:23 +08:00 via Android
不错
|
33
xieguanglei 2019-01-05 19:52:15 +08:00
@but0n 就是框架本身不会调用 DOM API,只需要初始化的时候注入一个具有 getContext 方法的对象(可以是 Canvas
也可以是你自己的实现),框架不负责加载图片、模型,适应窗口尺寸变化等等。这么做的原因,是因为我们需要可以跑在 [GCanvas]( https://github.com/alibaba/GCanvas) 上(进而可以跑在 ReactNative 或 Weex 上),而且这样做这个渲染引擎也会更小,更纯粹于「渲染」。 |
34
jfhy0901 2019-01-05 19:59:14 +08:00 via Android
最近正好需要这个,有时间研究一下!先收藏了
|
35
but0n 2019-01-05 22:10:03 +08:00 via iPhone
@xieguanglei DOM 也有一些可以利用的功能,Aframe 的 ECS 就有依赖 DOM 树
|
36
circleee 2019-01-06 15:16:48 +08:00
你们到底是怎么收费呀?
|
37
xiangbulala OP @circleee 场景搭建的组件都是免费使用的(包括 campusbuilder 原模模搭,citybuilder 城市搭建工具、chartbuilder 大屏图表搭建工具),在线开发演示三维场景也是免费的,只有成为商业开发者(离线演示场景)、在线项目发布(去 logo )、项目离线部署才收费
|
38
STRRL 2019-01-08 12:32:17 +08:00 via Android
emmm 好像已经有成熟的 2b 公司在做这个了 云烟好像有一套这个
|
39
Nicoco 2019-01-08 13:16:34 +08:00
老哥稳
|
40
xiangbulala OP @STRRL 云烟?生产香烟的云烟么
|
41
gjx870327 2019-01-08 13:58:05 +08:00
不开源 有什么好说的 =。=||
|
42
ecmascript2020 2019-01-08 14:31:42 +08:00
神奇 公交车站台那边那个女的还会动
|
43
xiangbulala OP @ecmascript2020 哈哈哈你不说我都没发现,那个模型带动画
|
44
STRRL 2019-01-08 15:58:32 +08:00
@xiangbulala 对 云南烟草公司
|
45
lovelybear 2019-01-08 16:04:08 +08:00
其实还不如拿 Unity 做,最后导出成 webgl 的
|
46
xiangbulala OP @lovelybear 主要面对只有前端工程师,不熟悉 webgl 的用户,降低 3D 可视化应用开发门槛
|
47
blockmin 2019-01-08 17:22:37 +08:00
我前东家就是搞 3D 可视化的,但我在运营部门,完全不懂
|
48
xiangbulala OP @blockmin 哪家啊?~
|
49
yao978318542 2019-01-08 17:59:09 +08:00
提一个小 BUG 那几个演示按钮 重复点击的话 是不是会重复加载啊 而且好像不能取消
|
50
qiuyk 2019-01-08 18:19:34 +08:00
这不就是 BIM...么
|
51
blockmin 2019-01-08 21:46:08 +08:00
@xiangbulala 优锘科技
|
52
xiangbulala OP @yao978318542 主要是...没做
|
53
xiangbulala OP @qiuyk 可以理解是轻量的 bim,偏向应用于可视化管理而不是建造过程
|
54
xiangbulala OP @blockmin 就是优锘科技哈哈哈
|
55
yao978318542 2019-01-09 09:11:37 +08:00
挺不错了 厉害
|