< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Using Look At Function

In this sample, you may use the setLookat function to have the actor look at the mouse cursor when the actor is in idle motion or when the project plays back. The reaction area can be limited to within the web player only or the entire screen.

Using the setLookat Function
Look-At Mode	Look-At Strength

Controls Behaviors

This sample contains 6 buttons, their behaviors are:

Click the first button, Screen Mode, to have the actor look at the cursor within the screen area.
Click the second button, Player Mode, to have the actor look at the cursor within the player area.
Click the third button, None, to stop the actor from looking at the cursor.
Click the forth button, Mild, to set weakest look-at movements to the head and eyes of the character, which is suitable for real humans.
Click the fifth button, Medium, to set medium look-at movements to the head and eyes of the character .
Click the sixth button, Strong, to set strongest look-at movements to the head and eyes of the character, which is suitable for cartoon or non-human characters.
Please view source code here.

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.setLookatStrength("mild");
            player.loadActor("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode9/Interaction_lookat.uctmodel", {
                showActor: true,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode9/Affirmative.uctidle"
            });
        });
    });
    function SetScreen() {
        player.setLookat("screen");
    }
    function SetPlayer() {
        player.setLookat("player");
    }
    function SetNone() {
        player.setLookat("none");
    }
    function SetMild() {
        player.setLookatStrength("mild");
    }
    function SetMedium() {
        player.setLookatStrength("medium");
    }
    function SetStrong() {
        player.setLookatStrength("strong");
    }
</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, the position of the CrazyTalk Web Player in the custom web and loads another actor (Wife.uctmodel); meanwhile, assigns an idle motion (Exhausted.uctidle) to the newly loaded actor.
- function SetScreen(): This function sets the look-at reaction area to the entire screen.
- function SetPlayer(): This function sets the look-at reaction area to the web player only.
- function SetNone(): This function turns off the look-at feature of the actor.
- function SetMild(): This function sets weakest look-at strength.
- function SetMedium(): This function sets medium look-at strength.
- function SetStrong(): This function sets strongest look-at strength.

The adjustable code 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

Replace the below address of the *.uctmodel files with the one where you have uploaded your custom actor.
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode9/Interaction_lookat.uctmodel

Note:

If the custom actor files are uploaded to the identical server where your custom web pages are, then simply change the entire addresses (http://...uctmodel) to the file names of the custom actors.
Otherwise, you must replace the entire addresses with the complete addresses (URL) of the custom actor files.

showActor: The Boolean (true or false) value determines if the character will be shown or hidden when the project is loaded.

function setScreen(), setPlayer() and setNone()

Change the string in the setLookAt function to "screen", "player" or "none" to determine if the character will look at the cursor within the entire screen, merely within the player, or not to look at the cursor at all.

functionsetMild(), setMedium() and setStrong()

Change the string in the setLookatStrength function to "mild", "medium" or "strong" to determine if the character will look at the cursor with hard.

<div id="unityPlayer" style="width: 640px; height: 480px;">
</div>
<input type="button" value="Screen Mode" onclick="SetScreen()" class="button" />
<input type="button" value="Player Mode" onclick="SetPlayer()" class="button" />
<input type="button" value="None" onclick="SetNone()" class="button" />

<input type="button" value="Mild" onclick="SetMild()" class="button" />
<input type="button" value="Medium" onclick="SetMedium()" class="button" />
<input type="button" value="Strong" onclick="SetStrong()" class="button" />

Web Player

Copy and paste the code 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.

Controls for Setting Look-at Modes

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 six <input.../> lines form six buttons on the web. Each of them will call the function declared within the head block after being clicked.