ThingJS和threejs的区别在哪?ThingJS是免费的么?

ThingJS_用户支持 6月前 645

使用ThingJS收费吗?ThingJS是怎么收费的呢?ThingJS官网上的价格页面中VIP(商业开发者)和商业开发者(离线SDK包)有什么区别吗?使用ThingJS能制作一个智慧园区可视化项目或者是智慧城市可视化项目吗?使用ThingJS大概要花多少钱?

这些想必是一些打算开始制作物联网三维可视化项目的人的一些问题了,有的人会问,木棉树怎么样?图扑怎么样?其他的物联网可视化平台又怎么样?甚至还会说,threejs不收费,为什么ThingJS要收费?有网友会说,你们的底层技术肯定是threejs,那么我先普及一下threejs是什么吧。

大家可以看看简书上的一位作者唐钊的一篇文章《ThreeJs 基础入门》,首先你得对3D有一定了解,其次你必须得知道threejs核心三大组件:场景、相机、渲染器,然后你还得学习光源、材质、几何图形、模型方面的知识,总的来说,threejs不愧是物联网可视化开发引擎中的佼佼者,精通threejs的,我们管这种人叫做大大佬,为啥?学习threejs,你不但涉及到了编程,还有一部分模型设计师方面的知识,为什么导出都是threejs基础入门的教材?不论是新手发的帖子还是大佬写的归纳,因为非常有必要写!总得来说就一个字:难!学习threejs的都是一群有理想有毅力同时也是非常有才华的人,为什么?threejs制作的3D可视化场景,更加精美,更加优秀,但同时也更加耗时间.....这些更加体现在哪?如果ThingJS试卷满分是100分的话,threejs无疑就是那种满分120分甚至是150分的试卷,为啥?就是因为threejs有加分题,就是那种做对了得分,做错了扣分的加分题,而ThingJS的试卷就是针对“普通学生”的。


同样一个立方体,threejs要多少行代码呢?45行代码,我觉得这个应该是threejs中代码最少的几个了吧?那效果呢?两个字形容,强大!

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>three.js webgl - geometry - cube</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 <link type="text/css" rel="stylesheet" href="main.css">
 </head>
 <body>
 <script type="module">
 import * as THREE from '../build/three.module.js';
 var camera, scene, renderer;
 var mesh;
 init();
 animate();
 function init() {
 camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
 camera.position.z = 400;
 scene = new THREE.Scene();
 var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
 var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 var material = new THREE.MeshBasicMaterial( { map: texture } );
 mesh = new THREE.Mesh( geometry, material );
 scene.add( mesh );
 renderer = new THREE.WebGLRenderer( { antialias: true } );
 renderer.setPixelRatio( window.devicePixelRatio );
 renderer.setSize( window.innerWidth, window.innerHeight );
 document.body.appendChild( renderer.domElement );
 //
 window.addEventListener( 'resize', onWindowResize, false );
 }
 function onWindowResize() {
 camera.aspect = window.innerWidth / window.innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize( window.innerWidth, window.innerHeight );
 }
 function animate() {
 requestAnimationFrame( animate );
 mesh.rotation.x += 0.005;
 mesh.rotation.y += 0.01;
 renderer.render( scene, camera );
 }
 </script>
 </body>
</html>


这个是上述代码制作出来的立方体盒子的效果图了,使用threejs制作出来的是不是非常的精细?


而下面的代码则是ThingJS制作一个立方体的代码了,多少行?只有15行,这还是加了注释的,那么不加注释是多少行?八行!这个还是附加了和threejs一样的自动旋转功能的,ThingJS也有一个“HelloWorld”示例,多少行代码?三行!!!是不是看着都觉得简单?HTML都不需要你写,直接写JavaScript代码就行了,那效果呢?

/**
 * 说明:创建一个Box,并在app的update事件中旋转Box,摄像机看Box
 */
var app = new THING.App();
// 创建Box
var box = app.create({
    type: 'Box',
    position: [-4, 0, 0],
});
// update事件
app.on('update', function () {
    box.rotateY(30 * app.deltaTime * 0.001); // 箱子自转
});
// 看Box
app.camera.lookAt(box);


当然,这就是最初级的立方体,看上面threejs制作的立方体效果和ThingJS制作的立方体效果,是不是瞬间就不想用ThingJS了呢?



那我给你看几个优秀的ThingJS场景效果:


那有人就会问了,这个是代码生成的么?就跟threejs一样么?这个如果也是代码生成的,那我不会建模我怎么做出来这个模型呀?对,关键点到了,threejs你得懂一定的建模知识,ThingJS呢?是为了开发项目,给谁用的?给前端工程师,会JavaScript的人用的,如果ThingJS跟threejs一样了,那ThingJS不是自己打自己脸了么?


正如花开两朵,各表一枝,ThingJS和threejs,就是迈向的两条道路的可视化之花,一个蓬勃发展,大神众多(threejs),而另一个则是蓄势待发,农村包围城市(thingjs),一个相当于走的是精英路线,而另一个则是走的普及化之路,同时也是threejs免费,ThingJS收费的一部分原因了,threejs对于技术的要求更高,闭门造车的话,threejs将无法走到技术的巅峰,而thingjs不同,追求的是大一统的行为,前端工程师都能使用的技术,大神两眼看穿的问题,萌新可能得三到五天还摸不着头脑,这就需要专业的技术团队去钻研、去优化。


那么thingjs和threejs相比,有哪些区别呢?threejs是一个3D引擎,而ThingJS是一个平台,一个只提供技术,而另一个是提供服务的平台,有兴趣爱好、想钻研技术的,threejs绝对是可视化方向中值得选择的!而需要快速开发项目,制作智慧园区、控制电力系统、给整栋大楼进行可视化运营管理的这种项目来说,ThingJS平台绝对值得选择!

最新回复 (0)

你可以在 登录 or 注册 后,对此帖发表评论!

返回