How to use the Interpolant function from three
Find comprehensive JavaScript three.Interpolant code examples handpicked from public code repositorys.
three.Interpolant is a class that performs linear interpolation between a series of values in order to animate a property over time.
947 948 949 950 951 952 953 954 955 956parameterPositions, sampleValues, sampleSize, resultBuffer ) { THREE.Interpolant.call( this, parameterPositions, sampleValues, sampleSize,
3
7
8+ 29 other calls in file
941 942 943 944 945 946 947 948 949 950resultBuffer, ); } GLTFCubicSplineInterpolant.prototype = Object.create( THREE.Interpolant.prototype, ); GLTFCubicSplineInterpolant.prototype.constructor = GLTFCubicSplineInterpolant; GLTFCubicSplineInterpolant.prototype.copySampleValue_ = function (index) {
000+ 15 other calls in file
How does three.Interpolant work?
three.Interpolant is a class in the Three.js library that represents an interpolant, which is a mathematical function used to interpolate a value between two known values using a given progression factor. The class provides different types of interpolants, such as linear, catmull-rom, and cubic-bezier. The interpolant can be used to create smooth animations between two states.
890 891 892 893 894 895 896 897 898THREE.Interpolant.call( this, parameterPositions, sampleValues, sampleSize, resultBuffer ); }; GLTFCubicSplineInterpolant.prototype = Object.create( THREE.Interpolant.prototype ); GLTFCubicSplineInterpolant.prototype.constructor = GLTFCubicSplineInterpolant; GLTFCubicSplineInterpolant.prototype.interpolate_ = function ( i1, t0, t, t1 ) {
000+ 8 other calls in file
Ai Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19import * as THREE from "three"; const colorStart = new THREE.Color(0xff0000); // red const colorEnd = new THREE.Color(0x00ff00); // green const colorInterpolant = new THREE.Interpolant( // Interpolation function (a, b, c) => a.lerp(b, c), // Values to interpolate [colorStart.r, colorStart.g, colorStart.b], [colorEnd.r, colorEnd.g, colorEnd.b], // Result buffer size (in this case, 3 for RGB) 3 ); // Interpolate halfway between the two colors (t=0.5) const resultBuffer = new Float32Array(3); colorInterpolant.evaluate(0.5, resultBuffer); const interpolatedColor = new THREE.Color().fromArray(resultBuffer); console.log(interpolatedColor.getHexString()); // Output: "80ff00"
In this example, colorInterpolant is an instance of three.Interpolant that is configured to interpolate between the RGB components of colorStart and colorEnd using the lerp method of Three.js's Color class. The resulting interpolated color is calculated by calling the evaluate method of colorInterpolant with a value of 0.5 (meaning halfway between colorStart and colorEnd) and a buffer to store the result. Finally, the interpolated color is output as a hex string using the getHexString method of Three.js's Color class.
three.Vector3 is the most popular function in three (22341 examples)