Javascript Three.js-动画未播放

Javascript Three.js-动画未播放,javascript,three.js,blender,skeletal-mesh,Javascript,Three.js,Blender,Skeletal Mesh,我对通过从blender导出到THREE.js的对象设置动画有问题。动画没有开始运行 当然,在从blender导出和导入到THREE.js库时,我尝试了多种设置组合,但都没有成功 这是代码,我认为应该是有效的。评论关键部分注释可能存在错误的地方。示例中也有指向源JSON的链接。当然,我可以提供源代码*.blend文件,如果需要 var tgaLoader=new THREE.tgaLoader(); var objectLoader=new THREE.objectLoader(); var

我对通过从blender导出到THREE.js的对象设置动画有问题。动画没有开始运行

当然,在从blender导出和导入到THREE.js库时,我尝试了多种设置组合,但都没有成功

这是代码,我认为应该是有效的。评论关键部分注释可能存在错误的地方。示例中也有指向源JSON的链接。当然,我可以提供源代码*.blend文件,如果需要

var tgaLoader=new THREE.tgaLoader();
var objectLoader=new THREE.objectLoader();
var clock=新的三个时钟();
var SCREEN_WIDTH=window.innerWidth;
var SCREEN_HEIGHT=window.innerHeight;
renderer=new THREE.WebGLRenderer({antialas:true});
renderer.setPixelRatio(window.devicePixelRatio);
设置大小(屏幕宽度、屏幕高度);
document.getElementById('container').appendChild(renderer.doElement);
objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/screever.json',函数(loadedsecene){
场景=加载的场景;
网格=场景。子对象[0];
scene.background=新的三种颜色(“白色”);
mesh.material=new THREE.MeshPhongMaterial({map:tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'));
半球光=新的三个半球光('白色','白色',0.6);
场景。添加(半光);
摄像机=新的三个透视摄像机(30,屏幕宽度/屏幕高度,10000);
相机。位置。设置(500,200,-100);
控制装置=新的三个控制装置(摄像机);
控制目标设置(0,50,0);
控件更新();
var geometry=新的三个平面缓冲几何体(200200);
var material=新的3.MeshPhongMaterial({光泽:0.1});
var地面=新的三个网格(几何体、材质);
ground.rotation.x=-Math.PI/2;
场景。添加(地面);
网格比例设置(-1,-1,1);
//临界截面。。。
混合器=新的三个。动画混合器(网格);
var sequence=THREE.AnimationClip.CreateFromMorphTargetSequence('animation',mesh.geometry.morphTargets,25,true);
var animation=mixer.clipAction(序列);
动画。播放();
//临界段结束
制作动画();
});
window.onresize=函数(){
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectMatrix();
renderer.setSize(window.innerWidth、window.innerHeight);
};
函数animate(){
请求动画帧(动画);
render();
}
函数render(){
var delta=0.75*clock.getDelta();
mixer.update(delta);
渲染器。渲染(场景、摄影机);
}
正文{
边际:0px;
溢出:隐藏;
}

我深入研究了动画,发现它使用了
变形目标。然后我想起了这件事。因此,关键时刻是将材质的
.morphTarget
参数设置为
true
,因此,我已将其应用于代码片段中的材质,并开始工作:

mesh.material = new THREE.MeshPhongMaterial({
    map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'),
    morphTargets: true
}); 
虽然我不确定这种方法是否正确,但至少它是有效的)

var tgaLoader=new THREE.tgaLoader();
var objectLoader=new THREE.objectLoader();
var clock=新的三个时钟();
var SCREEN_WIDTH=window.innerWidth;
var SCREEN_HEIGHT=window.innerHeight;
renderer=new THREE.WebGLRenderer({antialas:true});
renderer.setPixelRatio(window.devicePixelRatio);
设置大小(屏幕宽度、屏幕高度);
document.getElementById('container').appendChild(renderer.doElement);
objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/screever.json',函数(loadedsecene){
场景=加载的场景;
网格=场景。子对象[0];
scene.background=新的三种颜色(“白色”);
mesh.material=new THREE.MeshPhongMaterial({map:tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'),morphTargets:true});
半球光=新的三个半球光('白色','白色',0.6);
场景。添加(半光);
摄像机=新的三个透视摄像机(30,屏幕宽度/屏幕高度,10000);
相机。位置。设置(500,200,-100);
控制装置=新的三个控制装置(摄像机);
控制目标设置(0,50,0);
控件更新();
var geometry=新的三个平面缓冲几何体(200200);
var material=新的3.MeshPhongMaterial({光泽:0.1});
var地面=新的三个网格(几何体、材质);
ground.rotation.x=-Math.PI/2;
场景。添加(地面);
网格比例设置(-1,-1,1);
//临界截面。。。
混合器=新的三个。动画混合器(网格);
var sequence=THREE.AnimationClip.CreateFromMorphTargetSequence('animation',mesh.geometry.morphTargets,25,true);
var animation=mixer.clipAction(序列);
动画。播放();
//临界段结束
制作动画();
});
window.onresize=函数(){
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectMatrix();
renderer.setSize(window.innerWidth、window.innerHeight);
};
函数animate(){
请求动画帧(动画);
render();
}
函数render(){
var delta=0.75*clock.getDelta();
mixer.update(delta);
渲染器。渲染(场景、摄影机);
}
正文{
边际:0px;
溢出:隐藏;
}

我深入研究了动画,发现它使用了
变形目标。然后我想起了这件事。因此,关键时刻是将材质的
.morphTarget
参数设置为
true
,因此,我已将其应用于代码片段中的材质,并开始工作:

mesh.material = new THREE.MeshPhongMaterial({
    map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'),
    morphTargets: true
}); 
虽然我不确定这种方法是否正确,但至少它是有效的)

var tgaLoader=new THREE.tgaLoader();
var objectLoader=new THREE.objectLoader();
var clock=新的三个时钟();
var SCREEN_WIDTH=window.innerWidth;
var SCREEN_HEIGHT=window.innerHeight;
renderer=new THREE.WebGLRenderer({antialas:true});
renderer.setPixelRatio(window.devicePixelRatio);
设置大小(屏幕宽度、屏幕高度);
document.getElementById('container').appendChild(renderer.doElement);
objectLoader.load(“//cdn.rawgit.com/PiranhaGreg/files/master/screever.json”