在硬件工程师眼里,摄像头内置传感器是可以采集很多图像数据的,ThingJS把摄像机控制代码封装,制作成一个又一个容易拆卸的传感器嵌入到3D开发中,今天来看看都有哪些3D镜头“传感器”?

作为一个物联网可视化平台,ThingJS的优点我们就不再赘述,而开发物联网可视化项目,除了场景模型,就是对于摄像机的控制了(ThingJS将渲染封装到了最底层,使得开发人员无需过多了解建模知识,只需要专注于三维场景的开发),ThingJS中的摄像机是camera对象,我们如果是在ThingJS平台中,打印出camera的信息则需要使用到以下代码:

1	app.camera.log()  //在控制台中打印摄像机位置信息

接下来讲一下ThingJS控制摄像头的方法:1、位置信息用position属性2、目标点信息用target属性3、盯着物体用LookAt()4、设置摄像机位置用fit()方法5、摄像机分为园区使用和地球场景使用6、摄像机交互控制,包括水平移动、垂直移动、推进或旋转

ThingJS,如何制作3D镜头“传感器”?-LMLPHP

摄像机的位置信息以及目标点信息

camera摄像机有position属性以及target属性:

var pos = app.camera.position; //获取摄像机镜头位置
var target = app.camera.target; //获取摄像机目标点位置
console.log(pos +target); //在控制台打印出摄像机镜头位置以及摄像机目标点位置

摄像机的 lookAt() 方法

一般我们通过摄像机的 lookAt() 方法,可以让摄像机一直“盯着”某个位置或物体看。

 //摄像机一直“盯着”[0,0,0]点看
 app.camera.lookAt([0, 0, 0]);
 //摄像机一直“盯着”某物体看
 var obj = app.query("car01")[0];app.camera.lookAt(obj);
 //取消摄影机一直盯着物体看
 app.camera.lookAt(null);

摄像机的 fit() 方法

通过摄像机的 fit() 方法,也可以设置摄像机位置。

app.camera.fit({
    position: [100, 100, 100],
    target: [0, 0, 0]
});

如果 fit() 方法中传的是物体对象,那么镜头将“聚焦”到该物体,此时 ThingJS 会计算出该对象的“最佳看点”,从而“自适应”该对象来设置摄像机位置。

//设置摄像机到物体的“最佳看点”
app.camera.fit(obj);
//当不传参数时,设置摄像机到当前整个场景下的“最佳看点”
app.camera.fit();

园区&地球摄像机飞行

ThingJS中的摄像机分为在园区使用以及在地球场景中使用,所以对于经常在ThingJS中开发园区场景,突然有一天需要将场景应用在地球上时,就会发现摄像机飞行事件无法使用,这是因为在园区中,我们一般使用 flyTo() 方法,而地球中我们需要使用earthFlyTo()方法。园区场景-flyTo()

//从当前摄像机位置飞到指定位置,飞行时间2s,飞行结束后调用回调函数app.camera.flyTo({
    position: [0, 20, 20],
    target: [-30, 10, 0],
    time: 2 * 1000,
    complete: function() {
    console.log("飞行结束");
    }});

//以Quartic.In的插值方式 让飞行速度渐增
    app.camera.flyTo({
    position: [0, 20, 20],
    target: [-30, 10, 0],
    time: 3 * 1000,
    lerpType: THING.LerpType.Quartic.In});

//飞到物体的最佳视角,默认飞行时间3s
    app.camera.flyTo(obj);
    //2s飞到物体的最佳视角
    app.camera.flyTo({
    object: obj,
    time: 2 * 1000,
    complete: function() {
    console.log("飞行结束");
    }});

//自定义飞到物体的摄像机位置参数(同fit)
    app.camera.flyTo({
    object: obj,
    xAngle: 30, //绕物体自身X轴旋转角度
    yAngle: 60, //绕物体自身Y轴旋转角度
    radiusFactor: 3, //物体包围盒半径的倍数
    time: 5 * 1000,
    complete: function() {
    console.log("飞行结束");
    }});

// 也可以通过设置距离物体包围盒中心的距离(radius)确定摄像机位置
    app.camera.flyTo({
    object: obj,
    xAngle: 30, //绕物体自身X轴旋转角度
    yAngle: 60, //绕物体自身Y轴旋转角度
    radius: 3, //距离物体包围盒中心的距离 单位米
    time: 5 * 1000,
    complete: function() {
    console.log("飞行结束");
    }});
地球场景-earthFlyTo()用法:
//设置地图中心和相机高度
app.camera.earthFlyTo({
    lonlat: [116.372, 39.863],//目标点经纬度
    height: 5000,//离地高度
    heading: 60,//水平方向角度
    pitch: 45//垂直方向角度});

//调整地图视角到地图数据范围
app.camera.earthFlyTo({
    lonlat: [116.372, 39.863],//目标点经纬度
    height: 5000,//离地高度
    heading: 60,//水平方向角度
    pitch: 45//垂直方向角度});

//飞到指定位置
app.camera.earthFlyTo({
    time: 3000,
    lonlat: [116.39, 39.96],
    height: 5000,
    heading: 90,
    pitch: 45,
    complete: function () {
        console.log('earth fly finished');
    }
});

//飞到物体
let geoPolygon = app.query('.GeoPolygon')[0];
app.camera.earthFlyTo({
    time: 3000,
    object: geoPolygon,
    complete: function () {
        console.log('earth fly finished');
    }
});
//停止地球上的飞行和旋转动作
app.camera.stopEarthFly()

摄像机交互控制

ThingJS中有着关于摄像机使用的官方示例,在这里则仅展示摄像机控制这一示例:

/**
 * 说明:摄像机控制
 * 操作:点击按钮进行摄像机操作,如果需要复位可直接操作鼠标
 * 教程:摄像机——>交互控制
 * 难度:★★☆☆☆
 */
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'
});


// 水平移动
new THING.widget.Button('水平右移', function () {
    app.camera.move(10, 0);
});
new THING.widget.Button('水平左移', function () {
    app.camera.move(-10, 0);
});
// 垂直移动
new THING.widget.Button('垂直上移', function () {
    app.camera.move(0, 10);
});
new THING.widget.Button('垂直下移', function () {
    app.camera.move(0, -10);
});
// 推进
new THING.widget.Button('向前', function () {
    app.camera.zoom(10);
});
new THING.widget.Button('向后', function () {
    app.camera.zoom(-10);
});
// 旋转
new THING.widget.Button('水平旋转', function () {
    app.camera.rotateAround({
        target: app.camera.target,
        yRotateAngle: 10,
        time: 3000
    });
});
new THING.widget.Button('俯仰旋转', function () {
    app.camera.rotateAround({
        target: app.camera.target,
        xRotateAngle: 10,
        time: 1000
    });
});

ThingJS把摄像头功能的基础模块都用JS封装,基于3D开发人员很大方便,迅速完成可视化的动效演示!

09-09 05:50