请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 378|回复: 0

[分享] ThingJS vs three.js: 5个3D开辟概念剖析!3D 可视化

[复制链接]
avatar

16

主题

18

帖子

74

积分

网站编辑

Rank: 8Rank: 8

积分
74
ico_lz  楼主| 发表于 2020-11-4 13:49:39 | 显示全部楼层 |阅读模式

ThingJS三维坐标系弄清楚后,再斟酌把3D模子分化成三角形数据格式。

ThingJS 3D框架简化了开辟工作,面向工具和模块化的特点使得网页代码加倍易于治理和保护,而且供给近200个官方示例,间接获得API才能,不需要基于3D概念停止开辟,合适3D贸易项目快速天生!间隔您的营业仅一层之隔,是非开辟者也轻易了解的一种利用方式。

Three.js是更加底层的3D衬着器,供给林林总总的3D开辟概念,例如材质、网格、shader、灯光,逐一停止定制化开辟,要求法式员要有清楚的设想思绪,特别是在3D工具类的界说上。

ThingJS vs three.js: 5个3D开辟概念剖析!3D 可视化

明天一并总结常见的3D开辟概念及其利用方式,包括:(1)第一人称周游;(2)图片纹理;(3)子类与层级关系;(4)线段处置;(5)粒子系统。对于这些内容的诠释和说明,我们在剧本文件中穿插停止,看看three.js和ThingJS实现进程中有何区分?


第一人称周游

它答利用户经过键盘或鼠标对场景停止巡游控制,[ThingJS平台]经过第一人称行走控件实现。和three.js的代码量相比,明显加倍轻量化。

  1. // 增加控件
  2. var ctrl = null;
  3. var gui = null;
  4. function add_control() {
  5. if (ctrl) {
  6. return;
  7. }
  8. app.camera.position = [0, 10, 0];// 肇端位置 就是摄像机位置, 不设备就会在摄像机位置间接起头
  9. ctrl = app.addControl(
  10. new THING.WalkControl({ // 参数可以静态点窜
  11. walkSpeed: 0.02, // 行走速度
  12. turnSpeed: 0.25, // 右键扭转速度
  13. gravity: 29.8, // 物体重量
  14. eyeHeight: 1.6, // 人高度
  15. jumpSpeed: 10, // 按空格键 腾跃的速度
  16. enableKeyRotate: false, // 默许不开启键盘控制扭转
  17. useCollision: false, // 默许不开启碰撞检测
  18. useGravity: true // 默许开启重力
  19. })
  20. );
复制代码


图片纹理

在实在的3D场景中,模子是有纹理的,而不但仅是只要色彩值,Three.js经过ImageUtils.loadTexture方式利用图片纹理对3D模子停止贴图,使得模子更接近实在。例如,MeshLambertMaterial(朗勃面)是一种很常用的材质,它将利用漫反射的方式援用前面的纹理图片,终极结果还与光芒有关;别的一种常用的材质是MeshPhongMaterial,它可以发生镜面结果。

ThingJS中供给间接贴图的方式来实现模子纹理,建模师只要导入类似于照片结果的图形,简单实现模子的纹理,虽然没法实现three.js那样的细节定制化,仍然可以改变参数来接近实景结果。

  1. // 设备摄像机位置和方针点
  2. app.camera.position = [24.642510549459775, 4.302692201327658, 16.259715252398298];
  3. app.camera.target = [16.850313962013193, 0.15861977649910672, 4.364786416484356];
  4. new THING.widget.Button('建立 Box', function () {
  5. var box = app.query('#myBox01')[0];
  6. if (box) return;
  7. box = app.create({
  8. type: 'Box',
  9. id: 'myBox01',
  10. width: 2.0, // 宽度
  11. height: 2.0, // 高度
  12. depth: 2.0, // 深度
  13. center: 'Bottom', // 中心点
  14. position: [18, 0, 8],
  15. style: {
  16. image: 'images/uv.jpg',
  17. color: '#ffffff',
  18. }
  19. });
  20. })
  21. new THING.widget.Button('换 Box 贴图', function () {
  22. var imgUrl = 'https://www.thingjs.com/static/images/avatar.png';
  23. var box = app.query('#myBox01')[0];
  24. if (box) {
  25. box.style.image = imgUrl;
  26. }
  27. })
复制代码


子类与层级关系

在此示例中,月亮属于地球的子类,将跟从地球一路绕太阳公转,经过建立子类,不管地球若何活动,月亮将自动跟从地球,法式不需要再零丁处置这部份内容。层级关系是计较灵活画的重要概念之一。比如骨骼动画,对于人体动画,小腿骨骼将跟从大腿骨骼一路活动。

在 ThingJS 场景中,每个工具,都可以经过 children 拜候到下层子工具物体,经过 parent 拜候到对应的父物体。建立一个物体工具时,可指定该工具的父物体;一个物体工具也可以经过 add ,增加子物体。

ThingJS vs three.js: 5个3D开辟概念剖析!3D 可视化


线段处置

在实在的太阳系中并没有轨道线,但在法式中加入轨道线将使场景加倍美妙。我们利用圆形轨道来模拟实在轨道(实在轨道是椭圆的),THREE.LineBasicMaterial材质可将geometry中的极点逐一相连,只要分段充足多,终极的结果将趋于平滑的圆形,本例中,轨道线被分红了120段。

ThingJS供给轨迹线利用,间接封装了three.js有关于线条、材质的3D概念,间接取用轨迹线的工具法则来建立轨迹线,实现便利开辟。

  1. /**
  2. * 说明:轨迹线利用
  3. */
  4. app = new THING.App({
  5. url: 'https://www.thingjs.com/static/models/simplebuilding'
  6. });
  7. //轨迹线
  8. var line;
  9. app.on('load', function () {
  10. var points = [];
  11. var radius = 20;
  12. for (var degree = 0, y = 0.5; degree <= 520; degree += 2) {
  13. var x = Math.cos(degree * 2 * Math.PI / 360) * radius;
  14. var z = Math.sin(degree * 2 * Math.PI / 360) * radius;
  15. points.push([x, y, z]);
  16. }
  17. // 建立轨迹线
  18. line = app.create({
  19. type: 'Line',
  20. color: 0x00FF00, // 轨迹线色彩
  21. dotSize: 2, // 轨迹点的巨细
  22. dotColor: 0xFF0000, // 轨迹点的色彩
  23. points: points,
  24. })
  25. // 小车起头沿轨迹线活动
  26. play();
  27. // 建立按钮
  28. new THING.widget.Button('起头移动', play);
  29. new THING.widget.Button('轨迹线', showLines);
  30. new THING.widget.Button('轨迹点', showPoints);
  31. });
  32. // 物体跟从轨迹线活动
  33. function play() {
  34. var car = app.query('car01')[0];
  35. car.movePath({
  36. 'path': line.points, // 轨迹线路
  37. 'time': 12000, // 移动时候
  38. 'orientToPath': true, // 物体移动时沿向途径偏向
  39. });
  40. }
  41. // 显现/隐藏轨迹线
  42. var lineVisible = true;
  43. function showLines() {
  44. lineVisible = !lineVisible;
  45. line.showLines(lineVisible);
  46. }
  47. // 显现/隐藏轨迹点
  48. var pointVisible = true;
  49. function showPoints() {
  50. pointVisible = !pointVisible;
  51. line.showPoints(pointVisible);
  52. }
复制代码


粒子系统

为使全部地月系看起来加倍活泼,我们为其增加了布景星空,随机地增加了1000颗星星,它们的巨细和亮度不等,类似的情形包括烟雾结果、火焰结果、波纹结果等,在Three.js中,这类结果可以利用粒子系统来实现,即THREE.ParticleSystem。

ThingJS封装了粒子结果的实现方式,是更加顶层的笼统,所以削减了代码量和开辟投入,更受3D开辟初学者的接待,如间接用query查询API接口,在场景中加入火焰结果。

  1. // 建立火焰粒子
  2. new THING.widget.Button('create', function () {
  3. var fire = app.query('#fire01')[0];
  4. if (!fire) {
  5. app.create({
  6. id: 'fire01',
  7. type: 'ParticleSystem',
  8. url: 'https://model.3dmomoda.com/models/19061018snbajhvuzrheq9sbgwdoefuk/0/particles',
  9. parent: car, // 设备粒子的父物体
  10. localPosition: [0, 0, 0] // 设备粒子相对于父物体的位置
  11. });
  12. }
  13. })
复制代码


假如将场景扩大到了全部太阳系,包括水星、金星、地球、火星、木星、土星六大近地行星,一切星球均按实在巨细比例和距太阳的间隔机关,经过第一人称视角周游,用户可以自在挑选在肆意位置、肆意角度来观察太阳系,一样可以经过[ThingJS]的第一人称行走简单实现!

只要对技术实现逻辑清楚,便可以在分歧的场景上轻松利用法则,实现快速的范围化3D开辟!

ThingJS vs three.js: 5个3D开辟概念剖析!3D 可视化

接下来来的20年,我会经过投资,帮助有创业胡想的年轻人成为下一个马化腾、马云大概李彦宏。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则