How-to: Animate color in the Web Viewer

HOOPS Communicator
, , , ,
1

Language: JavaScript
Last Version Tested: HC 2022 SP2 U1

Please note that a more robust animation example exists as part of the Communicator “quick_start” menu:

hc_example_list
hc_example_list1922×949 95.9 KB

The following code is a distilled part of the animation example cited above so that it can quickly be executed in the web browser console:

// Create the Animation object
let animation = new Communicator.Animation.Animation("color_animation");
 
// Create the player
let player = hwv.animationManager.createPlayer(animation);

var nodeId = 67; //known node id of microengine model
var startTime = 1;
var duration = 2; 

function createColorChannel (nodeId, startTime) {
	const channelName = `Color-${nodeId}`;
	const buffer = new Communicator.Animation.KeyframeBuffer(Communicator.Animation.KeyType.Vec3);
	const sampler = new Communicator.Animation.Sampler(buffer, Communicator.Animation.InterpolationType.Linear);
	const channel = animation.createNodeChannel(channelName, nodeId, Communicator.Animation.NodeProperty.Color, sampler);
	
	// Set initial keyframe; set node color to green
	let green = new Communicator.Color.green();
	channel.sampler.buffer.insertVec3Keyframe(startTime, green.r, green.g, green.b);

	//Change node color to blue
	let blue = new Communicator.Color.blue();
	channel.sampler.buffer.insertVec3Keyframe(startTime + duration, blue.r, blue.g, blue.b);
}

createColorChannel(nodeId, startTime);

player.reload();
player.play();

More information about using the animation API can be found in our docs. Note that as of the date of when this article was written, the animation feature is in beta release.