Web3D框架——选threejs还是thingjs? admin 2023-01-31 12:45:01 篇首语:本文由小编为大家整理,主要介绍了Web3D框架——选threejs还是thingjs?相关的知识,希望对你有一定的参考价值。 “志之所趋,无远弗届 穷山距海,不能限也” Ns.jsZhuOER。CoM 如今2D应用变为3D应用的需求也越来越强烈,在3D方面WebGL不管从功能还是性能方面都在逐渐加强。3D在描述真实世界过程中能够带给我们更强的视觉感受。通过webgl来控制这些三维化模型,在可视的基础上还能可控,这也是目前三维可视化的一个发展方向,三维可视化解决方案的产生让使用者能够在数据大屏、手机上实时监控被可视化的场景,展现力与张力相比于没有可视化功能的解决方案更加强大,基于WebGL技术的3D框架有很多,其中优秀的工具有threejs、unity、thingjs等,今天主要探讨一下Three.js 和 Thingjs。 Ns.jsZhuOER。CoM Three.js Threejs是目前最火最流行的3D开源框架 。threejs对于底层的开发已经到达了一种的超级厉害超级棒地步,用threejs可以完成渲染,你可以去画点,线,面,可以去上色、贴图、处理光线,视角转动等等等等。Threejs库的出现解决了底层的渲染细节和复杂的数据结构,终于将复杂的底层细节抽象出来,使得大家开发3d应用更容易了一些。很多WebGL 3D库开发者首次接触threejs可以很容易的就能开始做一些实验。 Threejs三大组件:场景(scene)、相机(camera)和渲染器(renderer) 。 如果想在屏幕上展示 3D 物体,大体上的思路是这样的: 首先创建一个三维空间Scene ; 设置观察的方向和角度,确定一个观察点Camera ; 添加供观察的物体Object3D 类,如 Mesh、Group、Line 等到Scene 中 最后我们需要把所有的东西Renderer 到屏幕上。 Ns.jsZhuOER。CoMThree.js完整运行流程 1. 创建场景 var scene = new THREE.Scene(); 2. 创建相机,设置可视范围 var camera = new THREE.PerspectiveCamera(45, windows.innerWidth / windows.innerHeight, 0.1, 100) ; 3. 创建渲染器, 设置渲染范围, 并加载到页面中去 var renderer = new THREE.WebGLRenderer();renderer.setsize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); 4. 设置灯光, 并添加到场景中 var light = new THREE.DirectionalLight(oxFF0000, 1.0) // 方向光light.position.set(100, 100, 200);secen.add(light); 5.创建几何体,添加材料(或纹理),创建 网格对象, 将网格对象添加到场景中 var geometry = new THREE.CubeGeometry(1,1,1);var material = new THREE.MeshBasicMaterial{collor : 0x00ff00}) // 或 {map : something}var cube = new THREE.Mesh(geometry, material);scene.add(cube); 6.渲染(结合相机与场景) renderer.add(scene, camera); 实时渲染: function render () { cube.rotation.x += 0.1; // 物体绕 x 轴旋转 renderer.add(scene, camera); requestAnimationFrame(render); // 循环执行} 场景实例 根据上面说的,我们首先需要创建一个场景、相机、渲染器。 // 创建场景var scene = new THREE.Scene();// 创建透视相机var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 创建一个 WebGL 渲染器var renderer = new THREE.WebGLRenderer({alpha: true,});// 默认情况下为黑色场景,此处设置为透明(即白色场景)// 设置渲染器为全屏renderer.setSize(window.innerWidth, window.innerHeight);// 添加到网页中document.body.appendChild(renderer.domElement); 当了解图形的基本知识之后,在上面的代码的基础上添加简单图像。 var geometry = new THREE.BoxGeometry(1,1,1); // 创建一个长宽高都为1个单位的立方体var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 创建材质,对光照无感var cube = new THREE.Mesh(geometry, material); // 创建一个立方体网格(mesh),将材质包裹在立方体上scene.add(cube); // 将立方体网格添加到场景中camera.position.z = 5; // 指定相机位置function render() {requestAnimationFrame(render), renderer.render(scene, camera)};render();// 在render()函数中添加以下代码使上面在场景中添加的正方体运动起来。cube.rotation.x += 0.1;cube.rotation.y += 0.1; ThingJS ThingJS到底是什么?ThingJS中有着大量的公开项目,涵盖了智慧消防、智慧楼宇、智慧城市等各个领域,使用ThingJS平台可以制作出任何3D可视化行业案例。ThingJS为我们提供了一个“在线开发”编辑器,在这个“在线开发”中,有着详细的官方示例,这些示例由简入繁的向我们展示了绝大多数我们用得上的功能,比如数据对接、数据交互、视频、全景图等等。在进行在线开发的时候也可以直接使用快捷代码块来缩短开发时间。 ThingJS为我们专门制作了一个十分简单并且高效的3D场景编辑器CampusBuilder(模模搭),使用这个搭建场景就如同玩积木般,将我们想要搭建的模型放在固定的位置就行,它支持OBJ模型上传、导入CAD以及支持3ds Max的各种格式。若是CamBuilder中没有想要的模型,我们也可以在其他网站下载免费模型(如Sketchfab)并且使用。在文档中心有着对于ThingJS的介绍,以及如何从零开始一步步搭建3D可视化应用,同时还有着相关的API,包括ThingJS的API、全景图的API、园区的API,让我们在学习、使用和查找资料上都更加便捷。 在物联网可视化行业不断兴起的情况下,3D场景的制作也不仅限于在电影特效那方面了,而是迈入了各个行业,智慧楼宇、智慧城市、智慧园区、智慧港口等等可视化行业案例也是不断地产生,各种模型也是应有尽有,那么如何去使用这些模型?如何快速搭建一个3D可视化场景呢? 在物联网可视化行业不断兴起的情况下,3D场景的制作也不仅限于在电影特效那方面了,而是迈入了各个行业,智慧楼宇、智慧城市、智慧园区、智慧港口等等可视化行业案例也是不断地产生,各种模型也是应有尽有,那么如何去使用这些模型?如何快速搭建一个3D可视化场景呢?基于 html5 和 WebGL 技术,ThingJS 可方便地在主流浏览器上进行浏览和调试,支持 PC 和移动设备。ThingJS 为可视化应用提供了简单、丰富的功能,只需要具有基本的 javascript 开发经验即可上手。 新一代物联网可视化PaaS平台ThingJS是由优锘科技的技术团队自主研发,研发团队由来自IT管理软件和计算机图形两个领域的专家组成,在ThingJS中,thingjs的“在线开发”里面除了那个综合应用,还有好多别的示例,你可以看到许多公开的项目,涵盖园区、学校、医院、港口、消防、监控各个领域,你也可以看到许多精美优秀的场景,三行代码即可加载了一个3d场景,拿来编辑属于你自己的3D场景!使用thingjs的API控制,可以十分轻松的完成点击事件、物体移动、显示、消失,层级切换等等功能。 编码对比 threejs的模型加载 function load3DModel(){ var loader = new THREE.ColladaLoader(); loader.load( "./model/avatar.dae", function ( collada ) { //找到模型中需要的对象。将相机看向这个对象是为了让这个对象显示在屏幕中心 collada.scene.traverse( function ( child ) { if ( child instanceof THREE.SkinnedMesh ) { modelObj = child; camera.lookAt( child.position ); } } ); //将模型的场景加入到整体的场景 modelObj.material.opacity = 0.8; scene.add( collada.scene ); //每个模型都要添加到场景 //显示出模型的骨骼的代码,不需要可删去 var helper = new THREE.SkeletonHelper( modelObj ); helper.material.linewidth = 3; scene.add( helper ); } ); } Ns.jsZhuOER。CoMthingjs的模型加载 var app = new THING.App({ container: "p3d", url: "https://speech.uinnova.com/static/models/building" }); 在这个大数据爆发的时代,数据可视化也逐渐兴起,并且3D可视化相比于2D更加直观,如旋转查看物体,进入楼层、进入房间,还可以以“第一人称”的视角在场景中行走,比起2D来说,3D更加直观可视。同时将3D与数据结合,让3D场景也不在空洞,反而有了无限的可能!2D图表虽然也能反映出数据的关联性,但纯粹的2D图表却不能像3D那样既能查看如每个维度上的数据,又能查看与之相关的场景,2D方式无法将场景和数据完美的结合起来,但是3D可视化的方式,能够更直观,更贴切,更有效的反应数据相关性,处理数据。研究表明:比起文字,人们更喜欢看图,比起看2D图型,人们内心更喜欢查看3D图形,正如3D电影的兴起一般,3D可视化的风帆也正扬起。 目前,3D可视化技术广泛应用于各行各业,如机房管理、粮仓管理、校园管理、小区管理、电力管理、建筑管理、监控管理等等,通过3D可视化技术,结合实时数据能够达到设备仿真运行状态监控的效果,并且通过图像、3D技术,结合实体模型,使设备形象和实时信息更加具体,从而提升监控和管理效率,并且能够消除潜在隐患,减少人力损耗等等好处。 物联网开发中,最为强大的工具还是 Unity、threejs,但是就目前而言,封装threejs的ThingJS更加的简单,更专注业务层面,对于技术的要求更低,开发人员无需了解建模方面的知识,而是能够专注于开发,相比于其他工具,ThingJS无法做到操作底层参数,但也因为它的便捷,成为了目前市场上应用广泛、普及的智能可视化管理平台。 如果是想快速轻松的做项目,可以选择thingjs,如果对于渲染、点线面等要求十分严格,千万不要选择thingjs,thingjs就是简化了开发难度,但是也因此无法像threejs那样有精细的模型制作能力,如果你是3D开发爱好者,就去threejs的海洋驰骋吧! 如果你是天天加班赶时间的技术人员,还是跟我一起学习thingjs吧~ - END - Ns.jsZhuOER。CoM 以上是关于Web3D框架——选threejs还是thingjs?的主要内容,如果未能解决你的问题,请参考以下文章 如何创建crontab定时任务 小功能⭐️unity3d KeyCode各键值说明 您可能还会对下面的文章感兴趣: 相关文章 商丘私人空放联系方式_基本资料审核后快速就能放款平台 济宁私人借钱24小时在线,5万以上级别的贷款|无抵押个人借贷|秒下| 湖州空放私借2小时放款—身无分文借贷100%直接放款 宜昌纯私人放款微信电话——马上为您安排信贷服务+当日到账 蚌埠24小时私人放款联系方式随借随到-做生意借贷|应急周转|大额优先| 遵义空放借钱贷款联系电话:走投无路申请放款马上就到账 绵阳专业空放贷款私人联系方式,不看过往|先贷后放|马上拿钱| 德州附近个人放款电话号码多少:不审核+随借随还+当日成功+直接到账