three.js 关键帧动画

本文主要是介绍three.js 关键帧动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果：

代码：

<template><div><el-container><el-main><div class="box-card-left"><div id="threejs" style="border: 1px solid red"></div><div class="box-right"><el-button type="primary" @click="start">循环播放</el-button><el-button type="primary" @click="start_once">播放一次</el-button><el-button type="primary" @click="start_clamp">保持播放结束效果</el-button><el-button type="primary" @click="stop">结束动画</el-button><el-button type="primary" @click="pausedFn">暂停</el-button><el-button type="primary" @click="time_scale">2倍速循环播放</el-button><el-button type="primary" @click="time_duration">控制动画播放特定时间开始(2秒)</el-button><div style="margin-top: 20px;"></div><el-progress:percentage="percentage":format="format"></el-progress><el-button-group><el-button icon="el-icon-minus" @click="decrease">播放速度</el-button><el-button icon="el-icon-plus" @click="increase">播放速度</el-button></el-button-group><el-slider v-model="value1" @change="change"></el-slider>动画播放(拖动任意时间状态)</div></div></el-main></el-container></div>
</template>
<script>
// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 效果制作器
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
// 渲染通道
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
// 发光描边OutlinePass
import { OutlinePass } from "three/examples/jsm/postprocessing/OutlinePass.js";
import {CSS2DObject,CSS2DRenderer,
} from "three/examples/jsm/renderers/CSS2DRenderer.js";export default {data() {return {value1: 0,percentage: 20,name: "",scene: null,camera: null,renderer: null,effectComposer: null,mesh: null,geometry: null,group: null,material: null,texture: null,position: null,outlinePass: null,clock: null,mixer: null,clip_action: null,request_animation_frame: null,canvasWidth: 1000,canvasHeight: 800,color: [],meshArr: [],};},created() {},mounted() {this.name = this.$route.query.name;this.init();},methods: {goBack() {this.$router.go(-1);},// 动画播放(拖动任意时间状态)change(e) {console.log("e:", e);this.clip_action.paused = true;this.clip_action.clampWhenFinished = true;this.clip_action.time = 0.1 * e;},format(percentage) {return percentage / 10 + "倍";},increase() {this.percentage += 10;if (this.percentage > 100) {this.percentage = 100;}this.clip_action.timeScale = this.percentage / 10;},decrease() {this.percentage -= 10;if (this.percentage < 0) {this.percentage = 0;}this.clip_action.timeScale = this.percentage / 10;},init() {//  创建场景对象this.scene = new this.$three.Scene();// 创建立方几何体对象this.geometry = new this.$three.BoxGeometry(60, 50, 90);// 创建材质对象this.material = new this.$three.MeshBasicMaterial({color: 0xaabbdd,});// 创建网格对象this.mesh = new this.$three.Mesh(this.geometry, this.material);this.scene.add(this.mesh);this.clock = new this.$three.Clock();this.animation();// 调用play方法// clip_action.play();// 创建相机对象this.camera = new this.$three.PerspectiveCamera(60, 1, 0.01, 2000);this.camera.position.set(300, 300, 300);this.camera.lookAt(0, 0, 0);// 创建网格辅助对象const axesHelper = new this.$three.AxesHelper(100);this.scene.add(axesHelper);const gridHelper = new this.$three.GridHelper(300,20,0xffaaaa,0xaabbcc);this.scene.add(gridHelper);// 创建渲染器对象this.renderer = new this.$three.WebGLRenderer();this.renderer.setSize(1000, 800);this.renderer.render(this.scene, this.camera);window.document.getElementById("threejs").appendChild(this.renderer.domElement);const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.addEventListener("change", () => {this.renderer.render(this.scene, this.camera);});},// 创建关键帧的方法animation() {// 给模型定义namethis.mesh.name = "Box";// 定义时间范围const time = [0, 3, 6, 8, 10]; // 对应时间轴上的0,3,6秒// 定义0,3,6秒对应的坐标值const values = [0, 0, 0, 100, 0, 0, 0, 0, 100, 0, 100, 0, 0, 0, 0];// 创建关键帧 KeyframeTrack(params: String, timeRange: Array, valueRange: Array)// params 模型的属性，timeRange: 时间范围，valueRange: 值范围const position_kf = new this.$three.KeyframeTrack("Box.position",time,values);// 设置在2-6秒内颜色变化，颜色三个数一组表示 rgb格式的/*** .setRGB ( r, g, b ) thisr — 红色通道值在1和0之间。g — 绿色通道值在1和0之间。b — 蓝色通道值在1和0之间。设置颜色的RGB值。*/const color_kf = new this.$three.KeyframeTrack("Box.material.color",[2, 6],[1, 0.2, 0.3, 0.1, 0.8, 0.3]);// 创建关键帧动画对象  AnimationClip(name:String, time:Number, value: Array)const clip = new this.$three.AnimationClip("clip_name", 10, [position_kf,color_kf,]);// 创建动画播放器this.mixer = new this.$three.AnimationMixer(this.mesh);this.clip_action = this.mixer.clipAction(clip);},renderFun() {this.renderer.render(this.scene, this.camera);const frameT = this.clock.getDelta();// 更新播放器相关的时间(如果不更新，则没有动画效果)if (this.mixer) {this.mixer.update(frameT);}this.request_animation_frame = window.requestAnimationFrame(this.renderFun);},start() {this.clip_action.loop = this.$three.LoopRepeat;this.clip_action.paused = false;// play() 控制动画播放，默认循环播放this.clip_action.play();this.renderFun();},start_once() {this.clip_action.loop = this.$three.LoopOnce;// play() 控制动画播放，默认循环播放this.clip_action.play();this.renderFun();},start_clamp() {// 物体状态停留在动画结束的时候this.clip_action.clampWhenFinished = true;this.clip_action.loop = this.$three.LoopOnce;// play() 控制动画播放，默认循环播放this.clip_action.play();this.renderFun();},stop() {// play() 控制动画播放，默认循环播放this.clip_action.stop();// // 物体状态停留在动画结束的时候this.clip_action.clampWhenFinished = true;// this.renderFun();},pausedFn() {console.log(this.clip_action.paused);if (this.clip_action.paused) {this.clip_action.paused = false;} else {this.clip_action.paused = true;}this.renderFun();},time_scale() {this.clip_action.timeScale = 2;this.clip_action.play();this.renderFun();},time_duration() {// 控制动画播放特定时间段；需要设置为非循环模式、同时设置动画播放完定留在结束状态，// 设置为非循环模式this.clip_action.loop = this.$three.LoopOnce;this.clip_action.clampWhenFinished = true;this.clip_action.time = 2; // 动画开始时间// this.clip_action.duration = 2; // 动画结束时间this.clip_action.play();this.renderFun();},},
};
</script>
//
<style lang="less" scoped>
.box-card-left {display: flex;align-items: flex-start;flex-direction: row;width: 100%;.box-right {img {width: 500px;user-select: none;}}
}
</style>

 

这篇关于three.js 关键帧动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---