我正在学习加载 JSON 格式并使用 tQuery 对其进行操作。我确实成功地加载了动画模型，但它没有加载纹理，因为它加载了在屏幕中动画的漆黑模型。该模型非常好，因为它是 Three.js 中使用的示例模型，名为 stork.js。
这是我的代码。
<script>
var world=tQuery.createWorld().boilerplate().start();
world.removeCameraControls();
// Animation Variables
var animOffset = 0, // starting frame of animation
duration = 1000, // milliseconds to complete animation
keyframes = 12, // total number of animation frames = SEE THE FILE OF MODEL!
interpolation = duration / keyframes, // milliseconds per frame
lastKeyframe = 0, // previous keyframe
currentKeyframe = 0,
bird,bird_material;
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load("models/stork.js",
function(geometry, materials){
if(geometry.morphColors && geometry.morphColors.length) {
var colorMap = geometry.morphColors[0];
for (var i = 0; i < colorMap.colors.length; i ++) {
geometry.faces[i].color = colorMap.colors[i];
geometry.faces[i].color.offsetHSL( 0, 0.3, 0 );
}
}
geometry.computeMorphNormals();
addModelToScene(geometry, materials);
});
function addModelToScene(geometry, materials){
for (var i = 0; i < materials.length; i++) {
materials[i].morphTargets = true;
}
bird_material = new THREE.MeshPhongMaterial({
color: 0xffffff, morphTargets: true, morphNormals: true,
vertexColors: THREE.FaceColors, shading: THREE.SmoothShading
});
bird = new THREE.Mesh( geometry,bird_material );
bird.scale.set(0.02,0.02,0.02);
bird.position.set(0,0,0);
bird.rotation.set(0,3.9,0);
bird.castShadow = true;
var object3DNew = new tQuery.Object3D();
object3DNew.add(bird).addTo(world);
}
world.hook(function(){
if(bird){
var time = new Date().getTime() % duration;
var keyframe = Math.floor(time / interpolation) + animOffset;
if (keyframe != currentKeyframe){
bird.morphTargetInfluences[lastKeyframe] = 0;
bird.morphTargetInfluences[currentKeyframe] = 1;
bird.morphTargetInfluences[keyframe] = 0;
lastKeyframe = currentKeyframe;
currentKeyframe = keyframe;
}
bird.morphTargetInfluences[keyframe] = (time % interpolation) / interpolation;
bird.morphTargetInfluences[lastKeyframe] = 1 - bird.morphTargetInfluences[keyframe];
}
});
</script>
这是我得到的结果：
