Animate the camera around a point¶

Animate the camera around Mt.Fuji

animate_camera_around_point.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Animate the camera around a point</title>
        <meta property="og:description" content="Animate the camera around Mt.Fuji" />
        <script src="./v0.10.1/mapray.min.js"></script>
        <link rel="stylesheet" href="./v0.10.1/mapray.css">
        <style>
            body {margin: 0; padding: 0;}
            html, body, div#mapray-container { height: 100%; }
        </style>
    </head>

    <body>
        <div id="mapray-container"></div>
    </body>
</html>

<script>
    // サブクラスのコンストラクタ定義
    function CameraAnimation() {
        mapray.RenderCallback.call(this);

        const cloudApi = new mapray.cloud.CloudApiV2({
            tokenType: mapray.cloud.CloudApi.TokenType.ACCESS_TOKEN,
            token: "<YOUR_MAPRAY_ACCESS_TOKEN>"
        });

        new mapray.Viewer("mapray-container", {
            render_callback: this,
            dem_provider: new mapray.StandardDemProvider( cloudApi.getDefaultDemAsResource() ),
            image_provider: new mapray.StandardImageProvider({
                url: "https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/",
                format: ".jpg",
                min_level: 2,
                max_level: 18
            }),
        });

        // set camera position and settings
        this._distance = 10000.0;　// camera distance in View coordinate
        this._angular_velocity = 5.0;
        this._turn_angle = 0;

        // Set the focal point for the rotating camera.
        var mlocs_focal_point = new mapray.GeoPoint( 138.72736527, 35.36062805, 3775.63 );

        // Generate a matrix to convert from Mapray local coordinate system to GOCS coordinate system.
        this._mlocs_to_gocs = mlocs_focal_point.getMlocsToGocsMatrix( mapray.GeoMath.createMatrix() );
        this._cam_eye_target = mapray.GeoMath.createVector3( [0, 0, 0] );
        this._cam_up         = mapray.GeoMath.createVector3( [0, 0, 1] );
    }

    CameraAnimation.prototype = Object.create(mapray.RenderCallback.prototype);

    // Control camera animation within the callback function called every frame.
    CameraAnimation.prototype.onUpdateFrame = function(delta_time) {
        var camera = this.viewer.camera;

        //--------------
        // Calculate camera animation with a fixed focal point
        var animate_around_mat = mapray.GeoMath.createMatrix();
        mapray.GeoMath.setIdentity(animate_around_mat);
        animate_around_mat[13] = -this._distance;
        var pitch_angle = -30.0;
        var pitch_Mat = mapray.GeoMath.rotation_matrix([1, 0, 0], pitch_angle, mapray.GeoMath.createMatrix());
        var turn_Mat = mapray.GeoMath.rotation_matrix([0, 0, 1], this._turn_angle, mapray.GeoMath.createMatrix());
        mapray.GeoMath.mul_AA(pitch_Mat, animate_around_mat, animate_around_mat);
        mapray.GeoMath.mul_AA(turn_Mat, animate_around_mat, animate_around_mat);
        //

        // Camera position in camera local coordinate.
        var cam_pos = mapray.GeoMath.createVector3([animate_around_mat[12], animate_around_mat[13], animate_around_mat[14]]);

        // Define the transformation matrix from the view coordinate system to the GOCS
        var view_to_mlocs = mapray.GeoMath.createMatrix();
        mapray.GeoMath.lookat_matrix(cam_pos, this._cam_eye_target, this._cam_up, view_to_mlocs);
        //

        // Apply rotation to the initial camera position and update the camera position.
        mapray.GeoMath.mul_AA( this._mlocs_to_gocs, view_to_mlocs, camera.view_to_gocs );

        camera.near = this._distance / 2;
        camera.far = camera.near * 1000;

        // update turn angle for next frame.
        this._turn_angle += this._angular_velocity * delta_time;
    }

    // CameraAnimationのインスタンス作成
    var cam_Animation = new CameraAnimation();
</script>

Info

このサンプルコードは、<YOUR_MAPRAY_ACCESS_TOKEN>を、あなたのMapray CloudアカウントのOrganization Tokenに置き換えるまで、期待通りに動作しません。