Looking for an example of a Three.js AnimationClip

Trying to create simple keyframed animations in threeJS with an object3D for moving, rotating, and scaling? Check out this outdated example: . However, be warned that the animation rotation has switched to quaternion in threeJS.

Struggling to find a straightforward example that works with the new Animation system? Despite searching extensively, I have come up empty as there is no official documentation on the threeJS page.

Unfortunately, using Blender or Collada to create the animations is not an option for me since I imported the model from a step file which is not supported by either tool.

UPDATE Successfully resolved my issue with the provided example. Now faced with a new dilemma - trying to animate a nested Object3d but only the root Object3d. Specifying keys solely for the root object causes errors due to differences in hierarchy structure between the animation keys and Object3d hierarchy. This presents another challenge requiring further exploration.

Answer №1

In the given scenario, there was an issue with the rotation in animation keys being specified as quaternion instead of Euler rotation as shown in the example. Therefore, including a fourth value (1) to the rotation parameter resolved the problem.

Answer №2

After much searching, I stumbled upon a great example showcasing how to set desired values in key frames:

Misc animation keys

You can find the full source by inspecting that page.

Here is the essential part that has been pasted:

// create a keyframe track (i.e. a timed sequence of keyframes) for each animated property
// Note: the keyframe track type should correspond to the type of the property being animated

// POSITION
var positionKF = new THREE.VectorKeyframeTrack( '.position', [ 0, 1, 2 ], [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] );

// SCALE
var scaleKF = new THREE.VectorKeyframeTrack( '.scale', [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ] );

// ROTATION
// Rotation should be performed using quaternions, using a QuaternionKeyframeTrack
// Interpolating Euler angles (.rotation property) can be problematic and is currently not supported

// set up rotation about x axis
var xAxis = new THREE.Vector3( 1, 0, 0 );

var qInitial = new THREE.Quaternion().setFromAxisAngle( xAxis, 0 );
var qFinal = new THREE.Quaternion().setFromAxisAngle( xAxis, Math.PI );
var quaternionKF = new THREE.QuaternionKeyframeTrack( '.quaternion', [ 0, 1, 2 ], [ qInitial.x, qInitial.y, qInitial.z, qInitial.w, qFinal.x, qFinal.y, qFinal.z, qFinal.w, qInitial.x, qInitial.y, qInitial.z, qInitial.w ] );

// COLOR
var colorKF = new THREE.ColorKeyframeTrack( '.material.color', [ 0, 1, 2 ], [ 1, 0, 0, 0, 1, 0, 0, 0, 1 ], THREE.InterpolateDiscrete );

// OPACITY
var opacityKF = new THREE.NumberKeyframeTrack( '.material.opacity', [ 0, 1, 2 ], [ 1, 0, 1 ] );

// create an animation sequence with the tracks
// If a negative time value is passed, the duration will be calculated from the times of the passed tracks array
var clip = new THREE.AnimationClip( 'Action', 3, [ scaleKF, positionKF, quaternionKF, colorKF, opacityKF ] );

// setup the AnimationMixer
mixer = new THREE.AnimationMixer( mesh );

// create a ClipAction and set it to play
var clipAction = mixer.clipAction( clip );
clipAction.play();

The animation consists of 3 key frames [0,1,2] = [initial,final,initial]

The Position array [ 0, 0, 0, 30, 0, 0, 0, 0, 0 ] represents (0,0,0) -> (30,0,0) -> (0,0,0)

Answer №3

After searching extensively, I managed to find only one solution:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_animation_scene.html

In addition, I successfully created a custom code snippet as well:

//Creating a mesh object
this.mesh = new THREE.Mesh( geometry, material );
    
//Initializing the clock for animations
this.clock = new THREE.Clock();
    
//Storing the mixer for handling animations
this.mixer = new THREE.AnimationMixer( this.mesh );
let animation = THREE.AnimationClipCreator.CreateRotationAnimation(100, "y");
this.mixer.clipAction(animation ).play();
    
//Integrating animation in the scene loop:
var delta = 0.75 * clock.getDelta();
this.mixer.update( delta );

By using this code snippet, the mesh will rotate along the y axis.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminating every instance of the character `^` from a given string

I am encountering an issue with a particular string: "^My Name Is Robert.^". I am looking to remove the occurrences of ^ from this string. I attempted using the replace method as follows: replyText.replace(/^/g, ''); Unfortunately, thi ...

Ways to duplicate the content of a div to the clipboard without the use of flash

Simple question! I have a div identified as #toCopy, along with a button identified as #copy. Can you suggest the most efficient method to copy the content of #toCopy to the clipboard upon clicking #copy? ...

What is the best way for ensuring that the test only proceeds after useEffect's update function has been executed?

function CustomApp() { let [counter, setCounter] = useState(0); useEffect(() => { setCounter(1); }, []); //<-------------------------set a checkpoint here to debug, triggered only once return counter; } // trouble-shooting ...

Using Javascript to conditionally hide a Vimeo iframe with an if-else statement

Hey amazing developers, I've been working on a cool thumbnail grid with an expanding view. Check out an example here. Within the expander, I added a video section that retrieves its video ID through an HTML5 data-attribute. Here's how it looks ...

Is there a way to retrieve JSON data using Vue and Axios?

I'm facing an issue trying to retrieve product data from a JSON file. Despite attempting different methods and searching for solutions online, I have not been able to find one that fits my specific scenario. As I am new to both Vue and axios, I apprec ...

React's conditional statement is malfunctioning

I am attempting to display a specific form for review if the user meets the following criteria: 1. Logged in 2. Not an administrator 3. Not a moderator My code currently looks like this: <h2>Write a Review</h2> {errorResortReview &a ...

Transforming table data into a JSON format

My goal is to generate a specific JSON format from a table. The table consists of rows and 4 columns. You can view my table here. I aim to create a JSONArray based on the table. The first value in the left column serves as the key in the JSON, while the la ...

Utilizing the Power of GrapesJs in Vue3

Recently, I attempted to integrate the GrapesJS editor into my Vue.js project, but encountered some difficulties. The editor was not visible in the browser, and the designated tag for the editor appeared empty. Here is my editor configuration: <template ...

Leveraging JavaScript and PHP for fetching image files and generating a downloadable zip folder

Currently, I am in the process of creating a Safari extension specifically designed for imageboard-style websites. One of the key features that I am eager to incorporate is the ability to download all images that have been posted on the site (not including ...

A different approach for dynamically displaying React components sourced from an API

As I develop a website using Next.js/React that pulls in content from Strapi CMS, my goal is to create a dynamic page template for news articles. The aim is to empower content editors by giving them the flexibility to choose the type of content they wish t ...

The simultaneous use of trackball controls and GUI is not compatible

When I click on them, the GUI changes together and I have looked at other answers. However, I am not sure where to put the listener. I tried putting the listener in render(), but it still doesn't work. How can I fix my code? This coding is related to ...

Is there a way to extract the MIME type from a base64 string?

My base64 String appears as "UklGRkAdEQBXQVZFZm10IBIAAAABAAEAg...". I am attempting to download this file using my browser. Therefore, I convert it to a blob with the following function: b65toBlob: function(b64Data, sliceSize = 512) { ...

Validate user credentials using both jQuery and PHP to display an error message if login details are incorrect

Working on a form validation using jQuery and PHP. I am utilizing an .ajax request to the server in order to verify if data has been entered into the form, and execute different actions based on the callback response received from the server. For instance, ...

What steps can I take to establish a simple yet secure password authentication using next.js, mongoDB, and bcrypt?

As a hobby programmer working on my project, I aim to implement a secure password authentication system in my next.js project using only my next.js backend API and MongoDB (Atlas via Data API). I understand that there are various third-party authentication ...

Using the outer ng-repeat's object property to filter nested ng-repeat items

I'm currently working on nesting two ng-repeats with two separate JSON files. The goal is to filter the second ng-repeat based on parameters from the first ng-repeat. The first JSON file, $scope.matches, includes information about each match in the W ...

Utilizing AJAX and jQuery to Cast Your Vote in a Poll

I have recently set up a basic poll using AJAX JSON jQuery to interact with the server side, but it seems to be malfunctioning. I would appreciate any guidance on where I may have made a mistake. I am still learning jQuery and JSON. JavaScript <script ...

Switching between numerical and alphabetical input using JQuery

How can I switch between allowing character and numeric input in a textbox? I currently have a JQuery function that restricts input to numbers only $('.numeric').on('input', function (event) { this.value = this.value.replace(/[^0 ...

leveraging AJAX to showcase information retrieved from a MySQL database

Hello! I am brand new to PHP and have little knowledge of AJAX. I am in the process of creating a photo gallery site and have used the following code to display my photos. I would like to make it possible, using AJAX or any other language, for someone to c ...

typescript warns that an object may be potentially null

interface IRoleAddProps { roles: Array<IRole> } interface IRoleAddState { current: IRole | null } class RoleAdd extends React.Component<IRoleAddProps, IRoleAddState> { state = { current: null, } renderNoneSelect = () ...

Creating splats from points with normals in three.js1. Define an array of points and corresponding

Having just started with both OpenGL and Three.js, I am currently working on a real-time "online" viewer that streams points (including surface normals) from one system application to a remote web interface using websockets. In summary, I have made modific ...