Question

我正在尝试在icosphere上实现一个简单的动画。动画只包含3个关键帧。起始位置，随机选择的顶点已经拉到侧面然后回到起始位置。我用这两个来源试图创造这个。

https://www.youtube.com/watch?v=JKB4aPUkCJw

http://stemkoski.github.io/Three.js/Model-Animation.html

似乎动画完全忽略了json文件告诉它做的事情，而只是随机移动一些顶点然后再回到起始位置。

这是我的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first three.js app</title>
        <style>
        body{
            margin: 0;
            overflow: hidden;
        }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="three.min.js"></script>
        <script src="ColladaLoader.js"></script>
        <script src="OrbitControls.js"></script>
        <script src="TrackballControls.js"></script>
        <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>


    <script>

var scene, camera, renderer;
var geometry, material, mesh;
var controls;
var obj, android;
var animOffset       = 0,   // starting frame of animation
walking         = false,
duration        = 5000, // milliseconds to complete animation
keyframes       = 3,   // total number of animation frames
interpolation   = duration / keyframes, // milliseconds per frame
lastKeyframe    = 0,    // previous keyframe
currentKeyframe = 0;

function init() {

   scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / 
window.innerHeight, 1, 10000 );
    camera.position.z = 5;


     var light = new THREE.PointLight(0xffffff, 0.9);
        light.position.set(0, 100, 10);
        scene.add(light);

     var light2 = new THREE.PointLight(0xffffff, 0.9);
        light.position.set(0, 0, 100);
        scene.add(light2);

     var light1 = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(light1);

     renderer = new THREE.WebGLRenderer({antialias: true});
     renderer.setSize( window.innerWidth, window.innerHeight );
     renderer.setClearColor(0xb7b7b7);

     document.body.appendChild( renderer.domElement );



     controls = new THREE.OrbitControls( camera );

        var loader = new THREE.ObjectLoader();
        loader.load('/three/star3.json', function (obj){
        scene.add(obj);
        obj.position.set(0, -0.5, 0);
        });



 }


var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "/three/portstar.json", addModelToScene );
// addModelToScene function is called back after model has loaded



 function addModelToScene( geometry, materials ) 
 {
// for preparing animation
for (var i = 0; i < materials.length; i++)
    materials[i].morphTargets = true;

var material = new THREE.MultiMaterial( materials );
android = new THREE.Mesh( geometry, material );
android.scale.set(10,10,10);
scene.add( android );
}







 function animate() {
    controls.update();
    render();
    requestAnimationFrame( animate );
    }

 function render(){

 if ( android ) // exists / is loaded 
   {
    // Alternate morph targets
    time = new Date().getTime() % duration;
    keyframe = Math.floor( time / interpolation ) + animOffset;
    if ( keyframe != currentKeyframe ) 
    {
        android.morphTargetInfluences[ lastKeyframe ] = 0;
        android.morphTargetInfluences[ currentKeyframe ] = 1;
        android.morphTargetInfluences[ keyframe ] = 0;
        lastKeyframe = currentKeyframe;
        currentKeyframe = keyframe;
    }
    android.morphTargetInfluences[ keyframe ] = 
        ( time % interpolation ) / interpolation;
    android.morphTargetInfluences[ lastKeyframe ] = 
        1 - android.morphTargetInfluences[ keyframe ];
}




//obj.rotation.x += 0.5;
  renderer.render( scene, camera );
 }


init();
render();
animate();
    </script>
</body>

所有内容都按照视频中显示的方式导出，但我还尝试了30个其他导出设置，试图解决这个问题。此外，如果任何人有任何有用的链接，可以帮助我学习three.js随时评论他们。我真的很想得到它，但我有很多麻烦。

three.js变形动画没有正确动画

0 个答案: