当前位置: 首页 > Web前端 > JavaScript

从零开始学习3D可视化相机

时间:2023-03-27 01:40:24 JavaScript

数字孪生可视化场景中的相机类似于拍照时使用相机的功能。在数字孪生可视化场景中,摄像头用于确定3D场景的视角。相机包含两个重要的位置参数:镜头的位置和被摄物体的目标(也称为目标点)。1.设置相机位置在项目文件中输入如下代码,获取当前相机相机的位置和目标属性,然后就可以获取相机在数字孪生可视化场景中的位置信息,或者打印在安慰。//加载场景代码varapp=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse'//场景地址});varpos=app.camera.position;//获取相机镜头位置vartarget=app.camera.target;//获取相机目标点位置console.log(pos);控制台日志(目标);运行项目后,可以在预览窗口中显示创建的数字孪生对象,如下图所示。也可以通过相机的fit()方法设置相机位置。varapp=newTHING.App({url:'https://www.thingjs.com/static/models/storehouse'//场景地址});//加载完成事件app.on('load',function(ev){/*参数:ev.campuscampus,类型:Campusev.buildingscampusbuildings,类型:Selector*/varcampus=ev.campus;console.log('afterload'+campus.id);app.camera.fit({position:[100,100,100],target:[0,0,0]});});运行项目后,可以在预览窗口中显示创建的数字孪生体可视化对象,如下图所示。2.设置相机飞行通过相机的flyTo()方法,相机可以飞到某个位置或物体上。app.camera.flyTo({name:value,})可以通过app.camera.flying属性判断相机是否在飞行。相机可以通过app.camera.stopFlying()停止飞行。3.设置相机旋转通过相机的rotateAround()方法,相机可以围绕某个点或物体旋转app.camera.rotateAround({name:value,})4.控制相机交互ThingJScamera提供默认平移旋转、缩放交互操作。您可以通过以下脚本为相机添加不同的交互控件,根据您的需要进行选择。//关闭所有默认交互操作(旋转、平移、缩放);app.camera.inputEnabled=false;//关闭默认翻译操作;app.camera.enablePan=false;//关闭默认旋转操作;应用程序。camera.enableRotate=false;//关闭默认缩放操作;app.camera.enableZoom=false;//设置鼠标输入时移动相机的速度app.camera.mousePanSpeed=10;//设置键盘输入时移动相机的速度app.camera.keyPanSpeed=10;//设置相机水平角度范围[最小值,最大值]app.camera.yAngleLimitRange=[30,60];//设置相机俯仰角度范围[最小值,最大值]app.camera.xAngleLimitRange=[30,60];//相机水平移动10mapp.camera.move(10,0);//相机垂直移动10mapp.camera.move(0,10);//相机向前移动10mapp。相机.zoom(10);//设置相机目标为圆心与水平方向旋转的角度增量app.camera.rotateY(20);//设置相机目标为圆心,垂直方向旋转角度增量app.camera.rotateX(20);//切换到3D模式app.camera.viewMode=THING.CameraView.Normal;//切换到2D模式app.camera.viewMode=THING.CameraView.TopView;——————————————————数字孪生可视化:https://www.thingjs.com/