本帖最后由 Felix.Li 于 2024-11-20 15:20 编辑
前置小章节-点击跳转
3D场景中的相机多种多样,默认的相机RotateCamera 就是我们可以以场景为中心,去旋转和右键平移,今天分享另一种相机,叫做跟随相机,顾名思义,这种相机就是跟随的,他需要你去指定一个模型然后就会随着模型的移动而移动------跟随。
先看一下下面的场景:
首先我们自己准备好可以运动的模型。
可以参考官网:
https://www.grapecity.com.cn/sol ... l/3dScene/animation
有了动画剩下的就是添加跟随相机和切换使用相机了。
创建跟随相机的方法:
- scene.createFollowCamera = (followCameraName, followModelName) => {
- const model = scene.getMeshByName(followModelName) || scene.getNodeByName(followModelName);
- const followCamera = new BABYLON.FollowCamera(followCameraName, new BABYLON.Vector3(0, 0, 0), scene, model);
- followCamera.radius = 10; // 摄像机与车辆的距离
- followCamera.heightOffset = 5; // 摄像机的高度
- followCamera.rotationOffset = 180; // 摄像机的旋转角度
- // 将摄像机的目标设置为车辆
- followCamera.lockedTarget = model;
- }
复制代码 在其他地方调用并创建一个跟随相机:
- scene.createFollowCamera("followCamerPersion1","persion_1");
复制代码
切换使用的相机:
- let walkFollowCamera = scene.cameras.filter(item => (item.name == "followCamerPersion1"))[0];
- //初始相机
- let arcRotateCamera = scene.cameras.filter(item => (item.name == "ArcRotateCamera"))[0];
- arcRotateCamera.detachControl();
- scene.activeCamera = walkFollowCamera;
- walkFollowCamera.attachControl(true);let walkFollowCamera = scene.cameras.filter(item => (item.name == "followCamerPersion1"))[0];
- //初始相机
- let arcRotateCamera = scene.cameras.filter(item => (item.name == "ArcRotateCamera"))[0];
- arcRotateCamera.detachControl();
- scene.activeCamera = walkFollowCamera;
- walkFollowCamera.attachControl(true);
复制代码
上述代码中: followCamerPersion1是我们自己创建的相机,ArcRotateCamera是内置相机,最后一段就是关闭内置相机,启动跟随相机,那么一个简单的,跟着人走的视角就有了。
|
|