我正在嘗試使用 Three.js 在 A-FRAME 中播放 glb 影片，現在它只作業一秒鐘然后就停止了，有人可以幫我嗎？這是我的代碼：
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('move', {
init: function () {
setTimeout( () => {
let position = this.el.getAttribute("position")
console.log(this.el.components['gltf-model'].model )
// Create an AnimationMixer, and get the list of AnimationClip instances
const mixer = new THREE.AnimationMixer( this.el.components['gltf-model'].model);
const clips = this.el.components['gltf-model'].model.animations[0];
var clock = new THREE.Clock();
// Play all animations
mixer.clipAction( clips ).play();
//In the animation block of your scene:
var delta = 0.25 * clock.getDelta();
mixer.update( delta );
}, 2000)
}
})
</script>
<a-scene>
<a-entity gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb" move position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>
</a-scene>
uj5u.com熱心網友回復：
等到模型加載：
this.el.addEventListener("model-loaded", evt => /* stuff */)}更新渲染回圈中的影片 - 在每個
tick. 您可以使用間隔或其他東西，但 aframe 已經為此目的提供了一個內置函式：
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script>
AFRAME.registerComponent('move', {
init: function() {
// wait until the model is loaded
this.el.addEventListener("model-loaded", evt => {
const mixer = new THREE.AnimationMixer(this.el.components['gltf-model'].model);
const clips = this.el.components['gltf-model'].model.animations[0];
mixer.clipAction(clips).play();
// "expose" the animation mixer
this.mixer = mixer;
})
},
// on each render loop (actually before each render loop)
tick: function(t, dt) {
if (!this.mixer) return; // if the mixer exists
this.mixer.update(dt / 1000) // update it with the delta time
}
})
</script>
<a-scene>
<a-entity gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb"
move position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>
</a-scene>uj5u.com熱心網友回復：
在 a-frame 中控制影片是通過 aframe extra 使用預定義的影片混合器組件。
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="model"
gltf-model="https://rawcdn.githack.com/BabylonJS/MeshesLibrary/55f475726670be2e7e4017b5f88c5762a90508c2/shark.glb"
position=".5 0.5 -5" scale="0.5 0.5 0.5"></a-entity>
</a-scene>
<script>
document.getElementById("model").setAttribute("animation-mixer", "clip:swimming");
const timedelay = setTimeout(delayFunction, 2000);
function delayFunction() {
document.getElementById("model").setAttribute("animation-mixer", "clip:bite");
}
</script>
</body>
您可以在其中將所需的影片設定為剪輯屬性并根據您的程式邏輯播放任何影片。如果有，請使用此作為參考。在我的代碼中，首先播放游泳影片，然后播放 2 秒咬影片。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/488842.html
標籤：javascript 动画 三.js 一个框架 gltf