鍵幀軌道完全指南)
VectorKeyframeTrackthree.js 矢量關(guān)鍵幀軌道完全指南【免費(fèi)下載鏈接】three.jsJavaScript 3D Library.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/th/three.js在 three.js 的動(dòng)畫系統(tǒng)中VectorKeyframeTrack是驅(qū)動(dòng)位置position、縮放scale等矢量屬性動(dòng)畫的核心軌道類型。本文基于 VectorKeyframeTrack 官方文檔 與 源碼實(shí)現(xiàn)系統(tǒng)講解其構(gòu)造函數(shù)、插值模式、底層原理、實(shí)戰(zhàn)用法與完整方法集幫助你理解并構(gòu)建基于矢量的關(guān)鍵幀動(dòng)畫。概述什么是 VectorKeyframeTrackVectorKeyframeTrack是 three.js 動(dòng)畫系統(tǒng)AnimationClip/AnimationMixer中用于存儲(chǔ)和插值矢量關(guān)鍵幀值的軌道類型。它繼承自 KeyframeTrack專門處理包含多個(gè)分量如三維向量的 x、y、z的動(dòng)畫數(shù)據(jù)。一個(gè)典型的應(yīng)用場(chǎng)景是為對(duì)象的.position或.scale屬性編寫關(guān)鍵幀動(dòng)畫。例如讓一個(gè)立方體在 0 秒位于原點(diǎn)、1 秒移動(dòng)到 (10, 0, 0)就需要一個(gè)矢量軌道來記錄這些位置變化。構(gòu)造函數(shù)詳解new VectorKeyframeTrack( name, times, values, interpolation )構(gòu)造一個(gè)新的矢量關(guān)鍵幀軌道參數(shù)與父類KeyframeTrack完全一致參數(shù)類型說明namestring軌道的名稱用于將軌道綁定到具體屬性如.position詳見 PropertyBinding 的軌道名解析timesArraynumber關(guān)鍵幀時(shí)間點(diǎn)列表秒如[0, 1, 2]valuesArraynumber關(guān)鍵幀值列表按時(shí)間點(diǎn)順序連續(xù)排列interpolationInterpolateLinear|InterpolateDiscrete|InterpolateSmooth插值類型可選默認(rèn)繼承父類的InterpolateLinear關(guān)于 values 的格式矢量軌道默認(rèn)按三維向量x, y, z處理因此 values 的長(zhǎng)度必須是 times 長(zhǎng)度的整數(shù)倍。例如兩個(gè)關(guān)鍵幀times [0, 1]對(duì)應(yīng) values 應(yīng)為[x0, y0, z0, x1, y1, z1]即 6 個(gè)數(shù)值。import * as THREE from three; // 創(chuàng)建一段位置動(dòng)畫0s 在 (0,0,0)1s 到 (10,0,0)2s 回到 (0,0,0) const positionTrack new THREE.VectorKeyframeTrack( .position, [ 0, 1, 2 ], [ 0, 0, 0, 10, 0, 0, 0, 0, 0 ], THREE.InterpolateLinear );父類構(gòu)造校驗(yàn)構(gòu)造函數(shù)內(nèi)部會(huì)先執(zhí)行兩次安全檢查見 KeyframeTrack.jsname未定義時(shí)拋出THREE.KeyframeTrack: track name is undefinedtimes未定義或?yàn)榭諘r(shí)拋出THREE.KeyframeTrack: no keyframes in track named name。隨后times與values會(huì)經(jīng) AnimationUtils.convertArray 轉(zhuǎn)換為Float32Array由繼承的TimeBufferType/ValueBufferType決定。核心屬性.ValueTypeName : string標(biāo)識(shí)軌道值類型的名稱VectorKeyframeTrack覆寫為vector源碼 VectorKeyframeTrack.js。該值在 KeyframeTrack.toJSON 序列化時(shí)作為json.type輸出供反序列化時(shí)重建對(duì)應(yīng)軌道類型。繼承自 KeyframeTrack 的屬性VectorKeyframeTrack自身沒有新增屬性以下關(guān)鍵屬性均從父類繼承屬性默認(rèn)值說明.DefaultInterpolationInterpolateLinear默認(rèn)插值類型見 KeyframeTrack.js.TimeBufferTypeFloat32Array時(shí)間數(shù)據(jù)緩沖類型.ValueBufferTypeFloat32Array值數(shù)據(jù)緩沖類型.name—軌道名如.position、.scale或變形目標(biāo)名.times—關(guān)鍵幀時(shí)間點(diǎn)Float32Array.values—關(guān)鍵幀值Float32Array插值模式插值模式在構(gòu)造函數(shù)第四個(gè)參數(shù)中指定常量定義于 src/constants.js常量值行為THREE.InterpolateDiscrete2300離散插值不做平滑過渡適用于瞬時(shí)切換THREE.InterpolateLinear2301線性插值默認(rèn)在關(guān)鍵幀間直線過渡THREE.InterpolateSmooth2302平滑三次樣條插值曲線更圓滑THREE.InterpolateBezier2303貝塞爾插值需在track.settings中提供切線數(shù)據(jù)底層插值器工廠VectorKeyframeTrack直接復(fù)用父類的三個(gè)工廠方法KeyframeTrack.js分別創(chuàng)建DiscreteInterpolant、LinearInterpolant與CubicInterpolant而setInterpolation()負(fù)責(zé)把工廠方法掛到createInterpolant上。如果傳入了不支持的插值類型會(huì)回退到默認(rèn)插值并輸出警告unsupported interpolation for vector keyframe track named ...KeyframeTrack.js。對(duì)比四元數(shù)軌道QuaternionKeyframeTrack覆寫了線性插值工廠以使用QuaternionLinearInterpolant并禁用了平滑插值QuaternionKeyframeTrack.js而VectorKeyframeTrack對(duì)三種插值全量支持無需覆寫。與動(dòng)畫系統(tǒng)協(xié)作完整實(shí)戰(zhàn)示例VectorKeyframeTrack通常不單獨(dú)使用而是被包裝進(jìn)AnimationClip由AnimationMixer驅(qū)動(dòng)播放。以下是一個(gè)完整示例import * as THREE from three; const mesh new THREE.Mesh( new THREE.BoxGeometry(), new THREE.MeshStandardMaterial() ); // 1. 創(chuàng)建矢量軌道位置動(dòng)畫線性與縮放動(dòng)畫離散 const positionTrack new THREE.VectorKeyframeTrack( .position, [ 0, 1, 2 ], [ 0, 0, 0, 10, 0, 0, 0, 0, 0 ], THREE.InterpolateLinear ); const scaleTrack new THREE.VectorKeyframeTrack( .scale, [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ], THREE.InterpolateDiscrete ); // 2. 打包為動(dòng)畫剪輯 const clip new THREE.AnimationClip( move, 2, [ positionTrack, scaleTrack ] ); // 3. 交給混合器播放 const mixer new THREE.AnimationMixer( mesh ); const action mixer.clipAction( clip ); action.play(); // 4. 在渲染循環(huán)中更新 function animate( clock ) { mixer.update( clock.getDelta() ); renderer.render( scene, camera ); }繼承自 KeyframeTrack 的完整方法集VectorKeyframeTrack可直接使用父類的全部實(shí)例方法與靜態(tài)方法實(shí)現(xiàn)均在 KeyframeTrack.js方法說明setInterpolation( type )設(shè)置插值類型并返回this鏈?zhǔn)秸{(diào)用getInterpolation()返回當(dāng)前插值類型getValueSize()返回值分量數(shù)values.length / times.length矢量軌道通常為 3shift( timeOffset )將所有關(guān)鍵幀時(shí)間平移timeOffset秒返回thisscale( timeScale )將所有關(guān)鍵幀時(shí)間縮放timeScale倍常用于幀率與秒的換算返回thistrim( startTime, endTime )裁剪掉時(shí)間范圍外的關(guān)鍵幀并保證至少保留一個(gè)關(guān)鍵幀返回thisvalidate()校驗(yàn)軌道數(shù)據(jù)值大小是否為整數(shù)、時(shí)間是否合法、鍵序是否升序、值是否含 NaN返回布爾值optimize()移除相鄰的等價(jià)關(guān)鍵幀對(duì)形態(tài)目標(biāo)動(dòng)畫常見進(jìn)行就地壓縮返回thisclone()復(fù)制關(guān)鍵幀數(shù)據(jù)并返回新的同類型軌道toJSON( track )靜態(tài)方法序列化為 JSONtype字段即ValueTypeNameInterpolantFactoryMethodDiscrete/Linear/Smooth/Bezier各插值器的工廠方法單元測(cè)試驗(yàn)證倉(cāng)庫(kù)為VectorKeyframeTrack提供了獨(dú)立的單元測(cè)試 test/unit/src/animation/tracks/VectorKeyframeTrack.tests.js覆蓋了兩個(gè)核心斷言繼承關(guān)系new VectorKeyframeTrack(...) instanceof KeyframeTrack為true驗(yàn)證其正確繼承自基類實(shí)例化支持name times values三參數(shù)與name times values interpolation四參數(shù)兩種構(gòu)造方式。測(cè)試中的示例參數(shù)name: .force、times: [0]、values: [0.5, 0.5, 0.5]也印證了矢量軌道的典型數(shù)據(jù)形態(tài)——一個(gè)時(shí)間點(diǎn)對(duì)應(yīng)三個(gè)分量值。使用建議與注意事項(xiàng)values 長(zhǎng)度務(wù)必保證values.length times.length * 3三維向量場(chǎng)景否則validate()會(huì)報(bào)告 Invalid value size。時(shí)間單調(diào)性times必須按升序排列亂序數(shù)據(jù)會(huì)被validate()識(shí)別為 Out of order keys。默認(rèn)插值不傳interpolation時(shí)使用線性插值InterpolateLinear絕大多數(shù)位移動(dòng)畫夠用需要平滑曲線時(shí)使用InterpolateSmooth需要瞬間切換如隱藏/顯示時(shí)使用InterpolateDiscrete。序列化往返toJSON()輸出的type: vector字段是反序列化時(shí)重建VectorKeyframeTrack的關(guān)鍵標(biāo)識(shí)KeyframeTrack.js。配合其他軌道將矢量軌道位置/縮放、四元數(shù)軌道旋轉(zhuǎn)QuaternionKeyframeTrack與數(shù)值軌道透明度等NumberKeyframeTrack組合進(jìn)同一個(gè)AnimationClip即可構(gòu)建完整的骨骼/對(duì)象動(dòng)畫。相關(guān)資源軌道基類KeyframeTrack 文檔 與 源碼兄弟軌道QuaternionKeyframeTrack、NumberKeyframeTrack、ColorKeyframeTrack、BooleanKeyframeTrack、StringKeyframeTrack均位于src/animation/tracks/目錄軌道解析與綁定PropertyBinding播放系統(tǒng)AnimationMixer、AnimationClip單元測(cè)試VectorKeyframeTrack.tests.js【免費(fèi)下載鏈接】three.jsJavaScript 3D Library.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/th/three.js創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 VectorKeyframeTrack：three.js 矢量關(guān)鍵幀軌道完全指南
VectorKeyframeTrackthree.js 矢量關(guān)鍵幀軌道完全指南【免費(fèi)下載鏈接】three.jsJavaScript 3D Library.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/th/three.js在 three.js 的動(dòng)畫系統(tǒng)中VectorKeyframeTrack是驅(qū)動(dòng)位置position、縮放scale等矢量屬性動(dòng)畫的核心軌道類型。本文基于 VectorKeyframeTrack 官方文檔 與 源碼實(shí)現(xiàn)系統(tǒng)講解其構(gòu)造函數(shù)、插值模式、底層原理、實(shí)戰(zhàn)用法與完整方法集幫助你理解并構(gòu)建基于矢量的關(guān)鍵幀動(dòng)畫。概述什么是 VectorKeyframeTrackVectorKeyframeTrack是 three.js 動(dòng)畫系統(tǒng)AnimationClip/AnimationMixer中用于存儲(chǔ)和插值矢量關(guān)鍵幀值的軌道類型。它繼承自 KeyframeTrack專門處理包含多個(gè)分量如三維向量的 x、y、z的動(dòng)畫數(shù)據(jù)。一個(gè)典型的應(yīng)用場(chǎng)景是為對(duì)象的.position或.scale屬性編寫關(guān)鍵幀動(dòng)畫。例如讓一個(gè)立方體在 0 秒位于原點(diǎn)、1 秒移動(dòng)到 (10, 0, 0)就需要一個(gè)矢量軌道來記錄這些位置變化。構(gòu)造函數(shù)詳解new VectorKeyframeTrack( name, times, values, interpolation )構(gòu)造一個(gè)新的矢量關(guān)鍵幀軌道參數(shù)與父類KeyframeTrack完全一致參數(shù)類型說明namestring軌道的名稱用于將軌道綁定到具體屬性如.position詳見 PropertyBinding 的軌道名解析timesArraynumber關(guān)鍵幀時(shí)間點(diǎn)列表秒如[0, 1, 2]valuesArraynumber關(guān)鍵幀值列表按時(shí)間點(diǎn)順序連續(xù)排列interpolationInterpolateLinear|InterpolateDiscrete|InterpolateSmooth插值類型可選默認(rèn)繼承父類的InterpolateLinear關(guān)于 values 的格式矢量軌道默認(rèn)按三維向量x, y, z處理因此 values 的長(zhǎng)度必須是 times 長(zhǎng)度的整數(shù)倍。例如兩個(gè)關(guān)鍵幀times [0, 1]對(duì)應(yīng) values 應(yīng)為[x0, y0, z0, x1, y1, z1]即 6 個(gè)數(shù)值。import * as THREE from three; // 創(chuàng)建一段位置動(dòng)畫0s 在 (0,0,0)1s 到 (10,0,0)2s 回到 (0,0,0) const positionTrack new THREE.VectorKeyframeTrack( .position, [ 0, 1, 2 ], [ 0, 0, 0, 10, 0, 0, 0, 0, 0 ], THREE.InterpolateLinear );父類構(gòu)造校驗(yàn)構(gòu)造函數(shù)內(nèi)部會(huì)先執(zhí)行兩次安全檢查見 KeyframeTrack.jsname未定義時(shí)拋出THREE.KeyframeTrack: track name is undefinedtimes未定義或?yàn)榭諘r(shí)拋出THREE.KeyframeTrack: no keyframes in track named name。隨后times與values會(huì)經(jīng) AnimationUtils.convertArray 轉(zhuǎn)換為Float32Array由繼承的TimeBufferType/ValueBufferType決定。核心屬性.ValueTypeName : string標(biāo)識(shí)軌道值類型的名稱VectorKeyframeTrack覆寫為vector源碼 VectorKeyframeTrack.js。該值在 KeyframeTrack.toJSON 序列化時(shí)作為json.type輸出供反序列化時(shí)重建對(duì)應(yīng)軌道類型。繼承自 KeyframeTrack 的屬性VectorKeyframeTrack自身沒有新增屬性以下關(guān)鍵屬性均從父類繼承屬性默認(rèn)值說明.DefaultInterpolationInterpolateLinear默認(rèn)插值類型見 KeyframeTrack.js.TimeBufferTypeFloat32Array時(shí)間數(shù)據(jù)緩沖類型.ValueBufferTypeFloat32Array值數(shù)據(jù)緩沖類型.name—軌道名如.position、.scale或變形目標(biāo)名.times—關(guān)鍵幀時(shí)間點(diǎn)Float32Array.values—關(guān)鍵幀值Float32Array插值模式插值模式在構(gòu)造函數(shù)第四個(gè)參數(shù)中指定常量定義于 src/constants.js常量值行為THREE.InterpolateDiscrete2300離散插值不做平滑過渡適用于瞬時(shí)切換THREE.InterpolateLinear2301線性插值默認(rèn)在關(guān)鍵幀間直線過渡THREE.InterpolateSmooth2302平滑三次樣條插值曲線更圓滑THREE.InterpolateBezier2303貝塞爾插值需在track.settings中提供切線數(shù)據(jù)底層插值器工廠VectorKeyframeTrack直接復(fù)用父類的三個(gè)工廠方法KeyframeTrack.js分別創(chuàng)建DiscreteInterpolant、LinearInterpolant與CubicInterpolant而setInterpolation()負(fù)責(zé)把工廠方法掛到createInterpolant上。如果傳入了不支持的插值類型會(huì)回退到默認(rèn)插值并輸出警告unsupported interpolation for vector keyframe track named ...KeyframeTrack.js。對(duì)比四元數(shù)軌道QuaternionKeyframeTrack覆寫了線性插值工廠以使用QuaternionLinearInterpolant并禁用了平滑插值QuaternionKeyframeTrack.js而VectorKeyframeTrack對(duì)三種插值全量支持無需覆寫。與動(dòng)畫系統(tǒng)協(xié)作完整實(shí)戰(zhàn)示例VectorKeyframeTrack通常不單獨(dú)使用而是被包裝進(jìn)AnimationClip由AnimationMixer驅(qū)動(dòng)播放。以下是一個(gè)完整示例import * as THREE from three; const mesh new THREE.Mesh( new THREE.BoxGeometry(), new THREE.MeshStandardMaterial() ); // 1. 創(chuàng)建矢量軌道位置動(dòng)畫線性與縮放動(dòng)畫離散 const positionTrack new THREE.VectorKeyframeTrack( .position, [ 0, 1, 2 ], [ 0, 0, 0, 10, 0, 0, 0, 0, 0 ], THREE.InterpolateLinear ); const scaleTrack new THREE.VectorKeyframeTrack( .scale, [ 0, 1, 2 ], [ 1, 1, 1, 2, 2, 2, 1, 1, 1 ], THREE.InterpolateDiscrete ); // 2. 打包為動(dòng)畫剪輯 const clip new THREE.AnimationClip( move, 2, [ positionTrack, scaleTrack ] ); // 3. 交給混合器播放 const mixer new THREE.AnimationMixer( mesh ); const action mixer.clipAction( clip ); action.play(); // 4. 在渲染循環(huán)中更新 function animate( clock ) { mixer.update( clock.getDelta() ); renderer.render( scene, camera ); }繼承自 KeyframeTrack 的完整方法集VectorKeyframeTrack可直接使用父類的全部實(shí)例方法與靜態(tài)方法實(shí)現(xiàn)均在 KeyframeTrack.js方法說明setInterpolation( type )設(shè)置插值類型并返回this鏈?zhǔn)秸{(diào)用getInterpolation()返回當(dāng)前插值類型getValueSize()返回值分量數(shù)values.length / times.length矢量軌道通常為 3shift( timeOffset )將所有關(guān)鍵幀時(shí)間平移timeOffset秒返回thisscale( timeScale )將所有關(guān)鍵幀時(shí)間縮放timeScale倍常用于幀率與秒的換算返回thistrim( startTime, endTime )裁剪掉時(shí)間范圍外的關(guān)鍵幀并保證至少保留一個(gè)關(guān)鍵幀返回thisvalidate()校驗(yàn)軌道數(shù)據(jù)值大小是否為整數(shù)、時(shí)間是否合法、鍵序是否升序、值是否含 NaN返回布爾值optimize()移除相鄰的等價(jià)關(guān)鍵幀對(duì)形態(tài)目標(biāo)動(dòng)畫常見進(jìn)行就地壓縮返回thisclone()復(fù)制關(guān)鍵幀數(shù)據(jù)并返回新的同類型軌道toJSON( track )靜態(tài)方法序列化為 JSONtype字段即ValueTypeNameInterpolantFactoryMethodDiscrete/Linear/Smooth/Bezier各插值器的工廠方法單元測(cè)試驗(yàn)證倉(cāng)庫(kù)為VectorKeyframeTrack提供了獨(dú)立的單元測(cè)試 test/unit/src/animation/tracks/VectorKeyframeTrack.tests.js覆蓋了兩個(gè)核心斷言繼承關(guān)系new VectorKeyframeTrack(...) instanceof KeyframeTrack為true驗(yàn)證其正確繼承自基類實(shí)例化支持name times values三參數(shù)與name times values interpolation四參數(shù)兩種構(gòu)造方式。測(cè)試中的示例參數(shù)name: .force、times: [0]、values: [0.5, 0.5, 0.5]也印證了矢量軌道的典型數(shù)據(jù)形態(tài)——一個(gè)時(shí)間點(diǎn)對(duì)應(yīng)三個(gè)分量值。使用建議與注意事項(xiàng)values 長(zhǎng)度務(wù)必保證values.length times.length * 3三維向量場(chǎng)景否則validate()會(huì)報(bào)告 Invalid value size。時(shí)間單調(diào)性times必須按升序排列亂序數(shù)據(jù)會(huì)被validate()識(shí)別為 Out of order keys。默認(rèn)插值不傳interpolation時(shí)使用線性插值InterpolateLinear絕大多數(shù)位移動(dòng)畫夠用需要平滑曲線時(shí)使用InterpolateSmooth需要瞬間切換如隱藏/顯示時(shí)使用InterpolateDiscrete。序列化往返toJSON()輸出的type: vector字段是反序列化時(shí)重建VectorKeyframeTrack的關(guān)鍵標(biāo)識(shí)KeyframeTrack.js。配合其他軌道將矢量軌道位置/縮放、四元數(shù)軌道旋轉(zhuǎn)QuaternionKeyframeTrack與數(shù)值軌道透明度等NumberKeyframeTrack組合進(jìn)同一個(gè)AnimationClip即可構(gòu)建完整的骨骼/對(duì)象動(dòng)畫。相關(guān)資源軌道基類KeyframeTrack 文檔 與 源碼兄弟軌道QuaternionKeyframeTrack、NumberKeyframeTrack、ColorKeyframeTrack、BooleanKeyframeTrack、StringKeyframeTrack均位于src/animation/tracks/目錄軌道解析與綁定PropertyBinding播放系統(tǒng)AnimationMixer、AnimationClip單元測(cè)試VectorKeyframeTrack.tests.js【免費(fèi)下載鏈接】three.jsJavaScript 3D Library.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/th/three.js創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考