Camera
相机类用于控制场景中的视角朝向、视角移动、视角跟随物体等
属性
target
相机当前看向的目标
- 类型: Vector3
方法
lookAt( )
更改相机看向的目标
//webgl
function lookAt: (x: DTVector3 | number, y?: number, z?: number) => void
//unity
function lookAt: (x: number, y: number, z: number) => void
参数
x:x 坐标 或 三维坐标- 参考: DTVector3
y:y 坐标，若 x 为三维坐标，则 y 为空z:z 坐标，若 x 为三维坐标，则 z 为空
返回值
- 无
示例
...省略获取meta实例的步骤...
const camera = meta.camera;
camera.lookAt({x: 10, y: 10, z: 10});
fit( ) unity
相机围绕目标物体旋转
function fit: (options: FitOptions) => () => void
参数
FitOptions:旋转配置- 参考: FitOptions
返回值
() => void
示例
...省略获取meta实例的步骤...
const component = meta!.get("Model Id")!;
camera.fit({
target: component,
speed: 10
});
setZoom( ) webgl
设置相机缩放
function setZoom: (options: ZoomOptions) => void
参数
options:相机缩放配置参数- 参考: ZoomOptions
返回值
- 无
示例
import { Easing } from "@tweenjs/tween.js";
...省略获取meta实例的步骤...
const camera = meta.camera;
camera.setZoom({
zoom: 5,
duration: 2000,
easing: Easing.Bounce.InOut
});
flyTo( )
相机飞向目标
//webgl
function flyTo: (
lookAt: CameraPosition,
params?: Omit<FlyToOptions, "lookAt">
) => BaseAnimation
//unity
function flyTo: (
lookAt: CameraPosition,
params?: Omit<FlyToOptions, "lookAt">
) => viod
参数
lookAt:相机看向的目标- 参考: CameraPosition
params:相机飞行配置参数， 不包含其中的 lookAt 属性参考: FlyToOptions
注: 当未指定 FlyToOptions 中的 position 时，则会把 lookAt 参数的值当作 position 的值
返回值
BaseAnimation:基础动画实例- 参考: BaseAnimation v4.1.4
示例
import { Easing } from "@tweenjs/tween.js";
...省略获取meta实例的步骤...
const camera = meta.camera;
const component = meta.get("Model_927a0a8eb06d49659e98173c397a39d5");
camera.flyTo(component, {
easing: Easing.Quadratic.InOut,
duration: 1000,
position: {
x: component.model.position.x + 80,
y: component.model.position.y + 80,
z: component.model.position.z + 80
}
});
travel( )
相机漫游
function travel: (
positions: CameraPosition[],
options?: TravelOptions
) => AnimationActions
参数
positions:相机移动路线- 参考: CameraPosition
options:相机旅行配置参数- 参考: TravelOptions
返回值
AnimationActions:动画控制对象- 参考: AnimationActions
示例
...省略获取meta实例的步骤...
const camera = meta.camera;
const animationHandler = camera.travel([
{x: 400, y: 400, z: 400},
{x: 600, y: 600, z: 100},
{x: 600, y: 600, z: 600},
],{
mode: "loop",
duration: 1000
});
setTimeout(() => {
animationHandler.stop()
}, 10000);
moveAlong( ) webgl
相机动态移动，与 travel( ) 不同的是， moveAlong( ) 在移动过程中，会绕目标点旋转，移动更加自然
function moveAlong: (
positions: CameraPosition[],
options?: MoveOptions
) => AnimationActions
参数
positions:相机移动路线- 参考: CameraPosition
options:相机移动配置参数- 参考: MoveOptions
返回值
AnimationActions:动画控制对象- 参考: AnimationActions
示例
...省略获取meta实例的步骤...
const camera = meta.camera;
camera.moveAlong(
[
{ x: 50, y: 0, z: 10 },
{ x: 15, y: 0, z: 80 },
{ x: 0, y: 0, z: 0 }
],
{
duration: 1000
}
);
stop( )
停止相机动画
function stop: () => void
参数
- 无
返回值
- 无
示例
...省略获取meta实例的步骤...
const camera = meta.camera;
camera.stop()
follow( )
相机跟随目标
function follow: (
object: Component<WebglModel> | WebglModel,
options?: FollowOptions
) => {
continue: () => void;
stop: () => void;
}
参数
object:跟随的目标- 参考: Component; WebglModel
options:相机跟随配置参数- 参考: FollowOptions
返回值
{...}:控制动画的方法
示例
import { Tween } from "@tweenjs/tween.js";
...省略获取meta实例的步骤...
const camera = meta.camera;
const component = meta.get("ModelId");
camera.follow(component);
const tween = new Tween(component.model.position);
tween.to({ y: 500 }, 3000);
tween.start();
const animate = () => {
requestAnimationFrame(animate);
tween.update();
};
animate();
faceTo( )
相机朝向某个目标
function faceTo: (target: CameraPosition, options?: FaceToOptions) => Promise<unknown>
参数
target:朝向的目标- 参考: CameraPosition
options:相机朝向配置参数- 参考: FaceToOptions
返回值
Promise<unknown>
示例
...省略获取meta实例的步骤...
const camera = meta.camera;
const component = meta.get("ModelId");
camera.faceTo(component);
adjust( ) webgl
自动调节相机当前位置
function adjust: (options?: AdjustOptions) => void
参数
options:相机位置自动调节配置参数- 参考: AdjustOptions
返回值
animation动画实例 BaseAnimation v4.1.4
示例
...省略获取meta实例的步骤...
const camera = meta.camera;
camera.adjust();