In this sample, you may use actorGaze function to make the
actor to gaze at a default or a custom point for a certain time when the
project is playing or the actor is idling.
Using the actorGaze Function
Degree(0~360):
Radius(0~100):
Duration:
Controls Behaviors
This sample contains 3 buttons and 3 edit boxes, their behaviors are:
Click the first button, Gaze left, to have the actor gaze to
the left for 3 seconds.
Click the second button, Gaze right, to have the actor gaze
to the right for 5 seconds.
Type in the numbers into the edit boxes, Degree, Radius, and Duration, and then click the button, Custom, to
have the actor gaze to a custom direction and strength in certain
seconds.
Copy and paste the codes 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 and plays a default project (Actor_Gaze.uctproject)
with an assigned idle motion (CTDefWebPreview.uctidle) once
your page is opened.
functionGazeLeft(): This
function transform the current actor to given size
and position in 5 seconds.
functionGazeRight(): This
function transform the current actor to another
given size and position in 3 seconds.
functionGazeCustom(): This
function collects values from certain text-editing
boxes defined in the body block and transform the
current actor accordingly..
For more information about the modification functions when loading a default project, please refer to the
Loading Projects section.
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.loadProject(){...}:
For more information about the modification method for the loading a default project function, please refer to the
Loading Projects section.
functionGazeLeft and
GazeRight
player.actorGaze({...}):
degree: This value determines the
direction for the actor to gaze in degrees.
radius: This value determines the
distance for the actor to gaze in percentage.
duration: This value determines the
transformation time in seconds. The minimum
value is 0.2.
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
(line 7 and line 8) 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 two <input.../> lines form two buttons on the web. Each of them will call the function declared
within the head block after being clicked.
Controls for Customizing Settings
Copy the Degree:<input.../> line to add a text-editing box in your web page for entering a desired
gazing direction for the actor.
Copy the Radius:<input.../> line to add a text-editing box in your web page for entering a desired
gazing distance for the actor.
Copy the Duration:<input.../> line to add a text-editing box in your web page for entering the desired time frame
for the actor to gaze.
Copy the last <input.../> line to the position
where you want to embed the button in-between the
<body> and
</body> tags of
your custom web page. This button will collect the values
the viewer enters in the text-editing boxes listed above and
then execute the gazing behavior for the actor by calling the
function defined in the head block.
