3D可视化应用开发对每个企业来说都是大工程，需要投入大量的人力物力财力才能做好这项工程，但其实可是化繁为简，不需要大费周章，具体来说，thingjs3D可视化开发平台，基于webgl3D绘制标准，使用最热门的Javascript语言，封装 threejs库 ，前端工程师可实现在线开发，可视化场景通过拖拽和简单写一些代码，对接数据源，项目部署之后就可以运行在您的服务器了~真是简单好用呢。

thingjs-面向物联网的3D可视化开发平台

* 说明：将场景中对象展示到界面上

* 操作：点击界面上选择框

* 说明：场景初始化完成后，子物体的显隐、样式默认继承父物体的显隐状态、样式

*      通过 obj.inheritVisible = true/false 控制子物体是否继承父物体显隐状态

// 引入jquery.easyui插件

THING.Utils.dynamicLoad(['lib/jquery.easyui.min.js', 'lib/default/easyui.css'], function() {

var panel =

`<div class="easyui-panel" style="opacity: 0; padding:5px; width: 300px;height: auto;margin-top: 10px;margin-left: 10px; position: absolute; top: 0; left: 0; z-index: 1;background-color: white">

<ul id="objectTree" class="easyui-tree"></ul>

</div>`

$('#div2d').append($(panel));

var app = new THING.App({

url: 'https://www.thingjs.com/static/models/storehouse'

// 这里使用了jquery.easyui的tree插件

app.on('load', function (ev) {

var buildings = app.query('.Building');

buildings.forEach(function (building) {

building.floors.forEach(function (floor) {

// 设置楼层不受建筑显隐控制

// floor.inheritVisible = false

$('#objectTree').parent().css('opacity', 1);

$('#objectTree').tree({

data: getRootData(ev.campus),

checkbox: true,

cascadeCheck: false,

onCheck: function (node, checked) {

app.query('#' + node.id).visible = checked;

// 根节点信息由 建筑 和 室外物体 组成

function getRootData(campus) {

var data = [];

campus.buildings.forEach(function (building) {

data.push(getBuildingData(building));

campus.things.forEach(function (thing) {

data.push(getThingData(thing));

return data;

// 收集 建筑 信息

function getBuildingData(building) {

var data = {

id: building.id,

checked: true,

state: 'closed',

text: building.type + ' (' + building.id + ')'

data["children"] = [];

building.floors.forEach(function (floor) {

data["children"].push(getFloorData(floor));

return data;

// 收集 楼层 信息

function getFloorData(floor) {

var data = {

id: floor.id,

checked: true,

state: 'closed',

text: floor.type + ' (level:' + floor.levelNumber + ')'

data["children"] = [];

floor.things.forEach(function (thing) {

data["children"].push(getThingData(thing));

return data;

// 收集 物 信息

function getThingData(thing) {

return {

id: thing.id,

checked: true,

text: thing.type + ' (' + thing.name + ')'

简单好用threejs库3D可视化平台thingjs，前端工程师会js就可以的，试一下你就知道如何做啦~

3D可视化应用开发对每个企业来说都是大工程，需要投入大量的人力物力财力才能做好这项工程，但其实可是化繁为简，不需要大费周章，具体来说，thingjs3D可视化开发平台，基于webgl3D绘制标准，使用最热门的Javascript语言，封装threejs库，前端工程师可实现在线开发，可视化场景通过拖拽和简单写一些代码，对接数据源，项目部署之后就可以运行在您的服务器了~真是简单好用呢。thin... 简单 的说 ，就是一门 绘制 3D 的 javaScript 轻量级框架； 主要采用 ，HTML5 Canvas提供硬件 3D 加速渲染； 于是web 端 ，就能制作出 3D 系统 ，访问就能操作 ，十分方便。 文章目录1.什么是 thre eJs Ⅰ.为什么要学这门前沿技术Ⅱ. 应用 场景2. 学习 Thre e . js 入门篇 （一）Ⅰ.安装下载Ⅱ. 创建场景、摄像机、渲染器（画布）Ⅲ. 创建坐标系Ⅳ.平面、立方体、球 的创建Ⅴ. 光源的创建Ⅵ.添加投影Ⅶ.鼠标操控三维场景3. 整合代码 GLTFLoader加载gltf模型，并解析模型动画； 基于worker-loader在vue中使用web worker； 基于web worker动态设置模型（鸟、牛）的移动路线； 基于geotiff. js 与DEM生成三维地形场景； thre ejs 中加载geo js on生成ShapeGeometry； 使用BufferGeometryLoader加载风机模型，并设置风机动态转动； 基于DataTexture 3D 生成三维云； 基于Sprites实现树木、草地、向日葵等