< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Initializing Camera Perspective

In this sample, you may use the setCameraMode function to initialize the perspective of the camera of the web player by adjusting the lens modes. There are three modes for the camera lens, each may cause different depth appearances for the character from weak to strong as the character is performing.

Using the setCameraMode Function

Controls Behaviors

This sample contains 5 buttons, their behaviors are:

Click the three left buttons to change the lens mode of the camera, and click the right two buttons to move the character to better observe the different effects of the lens.
Click the first button, Telephoto, to set the camera's perspective to flat mode. The character's depth will appear the weakest.
Click the second button, Standard, to set the camera's perspective to standard mode. The character's depth will appear average.
Click the third button, Wide Angle, to set the camera's perspective to fish-eye mode. The character's depth will appear stronger.
Click the fourth button, Move Character, to move the character from left to right to observe the camera perspective result.
Click the fifth button, Back to Center, to move the character back to the center of the web player.

Please view the source code here.

Note:

The functions shall be used within the CrazyTalk Web Player initialization code shown below.
If you do not use this function, then the default mode is Wide Angle.
It is not suggested that you switch the mode during play back because it will not cause any perspective-changing transition effects when the mode is changed.

Sample Code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
<script type="text/javascript" src="https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.min.js"></script>
<script type="text/javascript">
    var player = new CTWebPlayer();
    $(function () {

        player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
        player.init($("#unityPlayer"), function () {

            player.setCameraMode("telephoto");

            player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Camera/Cute_Dog.uctProject", {
                playAfter: -1,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode_Camera/Affirmative.uctidle",
                loaded: function(){
                            backToCenter();
                        }

            });

        });
    });




    function leftToRight(){
        player.actorTransform({
            scale: 100,
            positionX: 10,
            positionY: 47,
            duration: 0
        });

        player.actorTransform({
            scale: 100,
            positionX: 90,
            positionY: 47,
            duration: 10
        });
    }



    function backToCenter(){
        player.actorTransform({
            scale: 100,
            positionX: 50,
            positionY: 47,
            duration: 0
        });
    }


    function Perspective1() {
        player.setCameraMode ("telephoto");
    }


    function Perspective2() {
        player.setCameraMode ("standard");
    }


    function Perspective3() {
        player.setCameraMode ("wideAngle");
    }
</script>

Copy and paste the code in-between the <head> and </head> tags of your custom web page.
The purposes of the functions:
- $(function (): This function defines the address and the position of the CrazyTalk Web Player in the custom web page and initializes the player with the camera perspective set to Telephoto mode; meanwhile, preloading a project (Cute_Dog.uctProject) and an idle (CTDefWebPreview.uctidle) motion file without playing back.
- function leftToRight(): This function moves the current character from left to right sides of the web player.
- function backToCenter(): This function moves the current character back to the center of the web player.
- function Perspective1(): This function set the camera to Telephoto mode.
- function Perspective2(): This function set the camera to Standard mode.
- function Perspective3(): This function set the camera to Wide Angle mode.
The adjustable codes in the functions:
$(function ()
- Replace the below address of the CrazyTalk Web Player with the one within your self-hosting server.
  https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d
- player.setCameraMode("..."): This line determine the initial camera mode. The possible values are:
  - telephoto: This value make the camera perspective flat, which looks like a telephoto effect.
  - standard: This value increases the dimension of the camera's perspective.
  - wideAngle: This value sets the camera's perspective to strongest, which causes a fish-eye effect.
- player.loadProject("...",{}): Please refer to the Sample Code 3 - Loading Projects for more information about the adjustable parts in this function.
function leftToRight(), backToCenter()
- player.actorTransform({...}): Please refer to the Sample Code 15 - Tranforming Actor for more information about the settings for the parameters of transforming the actor.
function Perspective1(), Perspective2(), Perspective3()
- player.setCameraMode("..."): This line determine the initial camera mode. The possible values are:
  - telephoto: This value make the camera perspective flat, which looks like a telephoto effect.
  - standard: This value increases the dimension of the camera's perspective.
  - wideAngle: This value set the camera's perspective to strongest, which causes a fish-eye effect.

<div id="unityPlayer" style="width: 640px; height: 480px;">
</div>

<input type="button" value="Telephoto" onclick="Perspective1()" class="button" />
<input type="button" value="Standard" onclick="Perspective2()" class="button" />
<input type="button" value="Wide Angle" onclick="Perspective3()" class="button" />
<input type="button" value="Move Character" onclick="leftToRight()" class="button" />
<input type="button" value="Back to Center" onclick="backToCenter()" class="button" />

Web Player

Copy and paste the codes from <div> to </div> into the position where you want to embed the web player in-between the <body> and </body> tags of your custom web page.
Modify the numbers after the width: and height: parameters in the first line to customize the size of the player.

Buttons with Pre-defined Settings

Copy the <input.../> lines to the positions where you want to embed the buttons in-between the <body> and </body> tags of your custom web page.
Please note that:
- The function and the button that calls it must be individually put within the head and body blocks in pairs.
- You can only copy and paste the desired buttons and the functions to your custom web pages.
These <input.../> lines form four buttons on the web. Each of them will call the function declared within the head block after being clicked.