THREE.js中的动画填充模式“前进”

时间:2019-01-23 17:28:12

标签: animation three.js

我的动画正在工作,但是完成后,恢复为原始状态。 像我那样在终止后保持最终状态吗? 就像CSS中的“动画填充模式:转发”

import {merge } from 'lodash'
import requireGraphQLFile from 'require-graphql-file';
import {makeExecutableSchema } from 'apollo-server';

import resolver1 from  './resolvers/resolver1';
import resolver2 from  './resolvers/resolver2';
import resolver3 from  './resolvers/resolver3';

const schema1= requireGraphQLFile('./schema/schema1');
const schema2= requireGraphQLFile('./schema/schema2');
const schema3= requireGraphQLFile('./schema/schema3');

const resolvers = merge(resolver1, resolver2, resolver3)
const typeDef = gql `
type Query {
getData(filters:Filter,limit:Int,offset:Int):Result
}`;

const schema = makeExecutableSchema({
typeDefs: [typeDef, schema1,schema2, schema3],
resolvers
});

const server = new ApolloServer({
    schema
});

1 个答案:

答案 0 :(得分:1)

一旦完成,您可以使用AnimationAction.clampWhenFinished使动画在最后一帧暂停。

this.mixer = new THREE.AnimationMixer(this.box);
this.animation = this.mixer.clipAction(this.box.geometry.animations[0]);
this.animation.setDuration(1.5);
this.animation.setLoop(THREE.LoopOnce, 1);
this.animation.clampWhenFinished = true;

希望有帮助!