ThingJS那些笔记

创建
var equipment = app.create({
type: ‘Thing’,
url: ‘models/truck/’,
name: ‘我的卡车’,
id: ‘31415926’,
position: [-5, 0, 7],
complete: function(ev) {
console.log(ev.object.name + ’ created!’);
}
});
事件
// 选择室外所有物体 + 所有建筑
var objs = app.query(’.Building’).add(campus.things);

// 改变颜色
objs.on('mouseenter', function (ev) {ev.object.style.color = '#ff0000';
});// 还原颜色
objs.on('mouseleave', function (ev) {ev.object.style.color = null;
});

物体效果

改变透明度
car.style.opacity = 0.5 + 0.5 * Math.sin(2 * app.elapsedTime / 1000);
}, ‘每帧改变透明度’);

// 设置勾边颜色
car1.style.outlineColor = ‘#ff0000’;

//渐隐渐现
app.camera.fit(car);

new THING.widget.Button('渐隐', function () {car.fadeOut({time: 1000, // 时间 毫秒// 渐隐完成后的回调函数complete: function (ev) {console.log(ev.object.visible);}});
});new THING.widget.Button('渐现', function () {car.fadeIn({time: 1000,complete: function (ev) {console.log(ev.object.visible);}});
})

请求本地json的时候右击文件显示全部路径，线上和本地开发不一样

鼠标拾取物体和选择
// 鼠标拾取物体显示边框
app.on(THING.EventType.MouseEnter, ‘.Thing’, function(ev) {
ev.object.style.outlineColor = ‘#FF0000’;
});
// 鼠标离开物体边框取消
app.on(THING.EventType.MouseLeave, ‘.Thing’, function(ev) {
ev.object.style.outlineColor = null;
});
// 每一帧判断拾取的物体是否发生变化
app.on(‘update’, function () {
if (app.picker.isChanged()) {
console.clear();
// 打印当前被pick的物体
if (app.picker.objects[0]) {
console.log('当前拾取的物体 ’ + app.picker.objects[0].name);
}
// 打印之前被pick的物体
if (app.picker.previousObjects[0]) {
console.log('之前拾取的物体 ’ + app.picker.previousObjects[0].name);
}
}
});
selection 选择

app.on(THING.EventType.Select, '.Thing', function (ev) {// 将选中的物体颜色进行改变ev.object.style.color = "#ff0000";
});
app.on(THING.EventType.Deselect, '.Thing', function (ev) {// 取消物体选中时，颜色取消改变ev.object.style.color = null;
});

摄像机

//聚焦物体
var car = app.query(‘car01’)[0];
app.camera.fit(car);

// 设置摄像机位置和目标点
// 可直接利用代码块——>摄像机——>设置位置
app.camera.position = [-10.179597135589418, 57.92056475377832, -69.93170920109229];
app.camera.target = [8.694689127408054, -7.003812939834516, 11.51772904610059];

// 摄像机飞行到某物体
app.camera.flyTo({
‘object’: car,
// ‘xAngle’: 30, //绕X轴旋转的角度
// ‘yAngle’: 60, //绕Y轴旋转的角度
// ‘radiusFactor’:3, //物体包围球半径的倍数
‘time’: 2 * 1000,
‘complete’: function () {
console.log(‘飞行结束’);
car.style.color = null;
}
});
//环绕物体，围绕car在5秒内旋转180度
app.camera.rotateAround({
object: car,
time: 5000,
yRotateAngle: 180
});

顶视图
app.camera.viewMode = THING.CameraView.TopView;
3D视图
app.camera.viewMode = THING.CameraView.Normal;

// 设置摄像机俯仰角度范围[最小值, 最大值]
app.camera.xAngleLimitRange = [0, 90];
// 设置摄像机水平角度范围[最小值, 最大值]
app.camera.yAngleLimitRange = [30, 60];
// 禁用、启用旋转默认为 true 开启
app.camera.enableRotate = !app.camera.enableRotate
// 禁用/启用平移默认为 true 开启
app.camera.enablePan = !app.camera.enablePan;
// 禁用/启用平移 // 默认为 true 开启
app.camera.enableZoom = !app.camera.enableZoom

ThingJS那些笔记相关推荐

基于WebGL（ThingJS）的家具城商场 3D展示 3D可视化 DEMO
本文将模拟一个家具城,让大家足不出户在家里就能更加直观立体的挑选家具. 第一步,利用CampusBuilder搭建模拟场景.CampusBuilder的模型库有各种各样的模型,使我们搭建出的场景更逼真 ...
【读书笔记】知易行难，多实践
前言: 其实,我不喜欢看书,只是喜欢找答案,想通过专业的解答来解决我生活的困惑.所以,我听了很多书,也看了很多书,但看完书,没有很多的实践,导致我并不很深入在很多时候. 分享读书笔记: <高效1 ...
【运维学习笔记】生命不息，搞事开始。。。
001生命不息,搞事不止!!! 这段时间和hexesdesu搞了很多事情! 之前是机械硬盘和固态硬盘的测速,我就在那默默的看着他一个硬盘一个机械测来测去. 坐在他后面,每天都能看到这位萌萌的小男孩,各 ...
SSAN 关系抽取论文笔记
20210621 https://zhuanlan.zhihu.com/p/353183322 [KG笔记]八.文档级(Document Level)关系抽取任务共指id嵌入一样但是实体嵌入的时候 ...
pandas以前笔记
# -*- coding: utf-8 -*- """ Created on Sat Jul 21 20:06:20 2018@author: heimi "& ...
PyTorch 学习笔记（六）：PyTorch hook 和关于 PyTorch backward 过程的理解 call
您的位置首页 PyTorch 学习笔记系列 PyTorch 学习笔记(六):PyTorch hook 和关于 PyTorch backward 过程的理解发布: 2017年8月4日 7,195阅读 ...
容器云原生DevOps学习笔记——第三期：从零搭建CI/CD系统标准化交付流程
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
王道考研计算机网络笔记第六章：应用层
本文基于2019 王道考研计算机网络: 2019 王道考研计算机网络个人笔记总结第一章:王道考研计算机网络笔记第一章:概述&计算机网络体系结构第二章:王道考研计算机网络笔记第 ...

ThingJS那些笔记

ThingJS那些笔记相关推荐

最新文章

热门文章