从零开始学习3D可视化之摄像机

最新推荐文章于 2025-04-03 12:27:46 发布

原创

最新推荐文章于 2025-04-03 12:27:46 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#java #python #vue #android #js

本文从零开始介绍3D可视化中的摄像机设置，包括摄像机位置设定、飞行、旋转及交互控制。通过代码示例展示了如何在数字孪生场景中调整摄像机视角，实现对3D物体的观察和互动。

数字孪生可视化场景中的摄像机，与大家拍照时使用相机的功能相似，数字孪生可视化场景中用摄像机来确定观察 3D 场景的视角。摄像机包含两个重要的位置参数：镜头位置 position 和被拍摄物体的位置 target (又叫目标点)。

1、设置摄像机位置

将下面的代码输入到项目文件中，获取当前摄像机 camera 的 position 和 target 属性，就可以得到数字孪生可视化场景中摄像机的位置信息，也可以将其打印在控制台中。

// 加载场景代码 
var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'  // 场景地址
});

var pos = app.camera.position; //获取摄像机镜头位置
var target = app.camera.target; //获取摄像机目标点位置

console.log(pos);
console.log(target);

运行项目后，在预览窗口，可以展示出创建的数字孪生可视化物体，如下图所示。

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

var app = new THING.App({
    url: 'https://www.thingjs.com/static/models/storehouse'  // 场景地址
});

// 加载完成事件 
app.on('load', function (ev) {
    /* 参数:
        ev.campus        园区,类型:Campus
        ev.buildings    园区建筑物,类型:Selector
    */
    var campus = ev.campus;
    console.log('afte