three.js 关键帧动画

2024-01-11 07:36
文章标签 js 动画 three 关键帧

本文主要是介绍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 关键帧动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/593608。

相关文章

js+css二级导航

js+css二级导航

效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con
阅读更多...
js小题：通过字符串执行同名变量怎么做

js小题：通过字符串执行同名变量怎么做

在JavaScript中，你不能直接使用一个字符串来直接引用一个变量，因为JavaScript是一种静态类型语言（尽管它的类型在运行时可以变化），变量的名字在编译时就被确定了。但是，有几种方法可以实现类似的功能： 使用对象（或Map）来存储变量： 你可以使用一个对象来存储你的变量，然后使用字符串作为键来访问这些变量。 let myVars = { 'var1': 'Hello', 'var
阅读更多...
图形编辑器基于Paper.js教程03：认识Paper.js中的所有类

图形编辑器基于Paper.js教程03：认识Paper.js中的所有类

先来认一下Paper的资源对象，小弟有哪些，有个整体的认识。认个脸。 在Paper.js的 官方文档中类大致有如下这些： 基类： ProjectViewItemPointToolSizeSegmentRectangleCurveCurveLocationMatrixColorStyleTweenToolEventGradientGradientStopEvent 二级或三级类 继承Ite
阅读更多...
HTML文档插入JS代码的几种方法

HTML文档插入JS代码的几种方法

在HTML文档里嵌入客户端JavaScript代码有4中方法： 1.内联，放置在< script>和标签对之间。 2.放置在由< script>标签的src属性指定的外部文件中。 3.放置在HTML事件处理程序中，该事件处理程序由onclick或onmouseover这样的HTML属性值指定。 4.放在一个URL里，这个URL使用特殊的“javascript:”协议。 在JS编程中，主张
阅读更多...
js 正则表达式出现问题

js 正则表达式出现问题

帮同事写个页面，出现正则表达式不管怎么改都没法匹配的情况。。。。 reg = /^sy[0-9]+$/i; if(rtx.match(reg) == null){ alert("请输入正确的RTX账号!"); return false; } 因为之前一直用的是 reg ="/^sy[0-9]+$/i"; 写PHP写习惯了。。外面多写了两个双引号……T.T 改
阅读更多...
bootstrap和JS相关

bootstrap和JS相关

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。 bootstrap 显示隐藏div $('.show-info').click(function () {var show = $(this).data('show');if(show =='all'){$('#creative').show();$('#plan').show();$('#plan').attr('class','
阅读更多...
sublime配置node.js

sublime配置node.js

1、下载Nodejs插件，下载地址为： https://github.com/tanepiper/SublimeText-Nodejs（见本人网盘） 下载zip压缩包后解压，文件名改为Nodejs 2、打开Sublime Text3，点击菜单“Perferences” =>“Browse Packages”打开“Packages”文件夹，并将第1部的Nodejs文件夹剪切进来 3
阅读更多...
ArkTS开发系列之导航 (2.7动画）

ArkTS开发系列之导航 (2.7动画）

上篇回顾： ArkTS开发系列之导航 (2.6 图形） 本篇内容：动画的学习使用 一、 知识储备 1. 布局更新动画 包含显式动画（animateTo）和属性动画（animation） 动画类型名称特点显式动画闭包内的变化都会触发动画执行， 可以做较复杂的动画属性动画属性变化时触发动画执行， 设置简单 说白了，显示动画就是靠闭包事件触发，属性动画是挂在组件身上的属性变化触发 显式动画
阅读更多...
Android 扇形网络控件 - 无网络视图（动画）

Android 扇形网络控件 - 无网络视图（动画）

前言 一般在APP没有网络的情况下，我们都会用一个无网络的提示图标，在提示方面为了统一app的情况，我们一般使用简单的提示图标，偶尔只需要改变一下图标的颜色就一举两得，而不需要让PS来换一次颜色。当然app有图标特殊要求的就另当别论了。 效果图 当你第一眼看到这样的图，二话不说直接让UI给你切一张图标来的快对吧，我其实开始也是这么想的，但是到了做的app越来越多的时候，你就会发现就算是用
阅读更多...
Lodash-js工具库

Lodash-js工具库

1. Lodash 简介 Lodash 是一个现代 实用工具库，提供了许多有用的函数，帮助开发者处理常见的编程任务，如数组操作、对象处理、字符串处理等。Lodash 使得代码更简洁、更高效，极大地提高了开发效率。Lodash 的设计灵感来自于 Underscore.js，但提供了更多的功能和更好的性能。 2. 安装 Lodash Lodash 可以通过多种方式安装： 具体安装：参考官网
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2