three.js中g(shù)sap動畫庫實現(xiàn)物體的動畫
一、什么是gsap
GSAP(GreenSock Animation Platform
)是一個JavaScript
動畫庫,由GreenSock
公司開發(fā),用于在Web
應(yīng)用程序中創(chuàng)建高性能動畫。
使用GSAP
可以通過一些簡單的動畫操作來實現(xiàn)復(fù)雜的動畫效果,例如TweenLite、TweenMax、TimelineLite、TimelineMax等工具。
以下是一個簡單動畫的示例:
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script> </head> <body> <div id="box"></div> <script> // 選取元素 var box = document.getElementById("box"); // 設(shè)置初始樣式 gsap.set(box, {x: -100}); // 定義動畫 var tl = gsap.timeline({repeat: -1}); tl.to(box, {x: 100, duration: 1, ease: "power1.out"}) .to(box, {y: 100, duration: 1, ease: "power1.in"}) .to(box, {x: -100, duration: 1, ease: "power1.out"}) .to(box, {y: -100, duration: 1, ease: "power1.in"}); // 暫停動畫 function toggleAnimation() { tl.paused(!tl.paused()); } // 雙擊屏幕暫停動畫 document.addEventListener("dblclick", toggleAnimation); </script> </body> </html>
這是一個簡單的矩形動畫,矩形會沿著 X、Y 軸移動,在達(dá)到一個特定的位置時變形,然后在雙擊屏幕時暫停。
可以通過修改TweenMax動畫中的參數(shù)來實現(xiàn)不同的效果,例如使用不同的緩動函數(shù)(ease參數(shù))、改變動畫的持續(xù)時間(duration參數(shù))等。
二、在three.js中應(yīng)用gsap
這是一個使物體來回運動的案例,并且實現(xiàn)雙擊屏幕暫停動畫
要用這東西肯定得先下載拉
下載
npm i gsap
核心代碼
// 導(dǎo)入動畫庫 import gsap from "gsap"; // 創(chuàng)建幾何體 const geometry = new THREE.BoxGeometry(1, 1, 1); // 創(chuàng)建材質(zhì) const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 根據(jù)幾何體和材質(zhì)創(chuàng)建物體 const cube = new THREE.Mesh(geometry, material); // 設(shè)置動畫 let animate1 = gsap.to(cube.position, { x: 5, duration: 5, ease: "power1.inOut", // 設(shè)置重復(fù)的次數(shù),無限次循環(huán)-1 repeat: -1, // 往返運動 yoyo: true, // delay,延遲2秒運動 delay: 2, onComplete: () => { console.log("動畫完成"); }, onStart: () => { console.log("動畫開始"); }, }); gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: "power1.inOut" }); window.addEventListener("dblclick", () => { // console.log(animate1); if (animate1.isActive()) { // 暫停 animate1.pause(); } else { // 恢復(fù) animate1.resume(); } });
完整代碼
import * as THREE from "three"; // 導(dǎo)入軌道控制器 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; // 導(dǎo)入動畫庫 import gsap from "gsap"; // console.log(THREE); // 目標(biāo):掌握gsap設(shè)置各種動畫效果 // 1、創(chuàng)建場景 const scene = new THREE.Scene(); // 2、創(chuàng)建相機 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // 設(shè)置相機位置 camera.position.set(0, 0, 10); scene.add(camera); // 添加物體 // 創(chuàng)建幾何體 const cubeGeometry = new THREE.BoxGeometry(1, 1, 1); const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); // 根據(jù)幾何體和材質(zhì)創(chuàng)建物體 const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); // 修改物體的位置 // cube.position.set(5, 0, 0); // cube.position.x = 3; // 縮放 // cube.scale.set(3, 2, 1); // cube.scale.x = 5; // 旋轉(zhuǎn) cube.rotation.set(Math.PI / 4, 0, 0, "XZY"); // 將幾何體添加到場景中 scene.add(cube); console.log(cube); // 初始化渲染器 const renderer = new THREE.WebGLRenderer(); // 設(shè)置渲染的尺寸大小 renderer.setSize(window.innerWidth, window.innerHeight); // console.log(renderer); // 將webgl渲染的canvas內(nèi)容添加到body document.body.appendChild(renderer.domElement); // // 使用渲染器,通過相機將場景渲染進來 // renderer.render(scene, camera); // 創(chuàng)建軌道控制器 const controls = new OrbitControls(camera, renderer.domElement); // 添加坐標(biāo)軸輔助器 const axesHelper = new THREE.AxesHelper(5); scene.add(axesHelper); // 設(shè)置時鐘 const clock = new THREE.Clock(); // 設(shè)置動畫 var animate1 = gsap.to(cube.position, { x: 5, duration: 5, ease: "power1.inOut", // 設(shè)置重復(fù)的次數(shù),無限次循環(huán)-1 repeat: -1, // 往返運動 yoyo: true, // delay,延遲2秒運動 delay: 2, onComplete: () => { console.log("動畫完成"); }, onStart: () => { console.log("動畫開始"); }, }); gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: "power1.inOut" }); window.addEventListener("dblclick", () => { // console.log(animate1); if (animate1.isActive()) { // 暫停 animate1.pause(); } else { // 恢復(fù) animate1.resume(); } }); function render() { renderer.render(scene, camera); // 渲染下一幀的時候就會調(diào)用render函數(shù) requestAnimationFrame(render); } render();
哈哈哈 貼個圖敷衍一下,你知道這個物體是移動的就行,腦補一下,賴得做gif動圖了。。。。
到此這篇關(guān)于three.js中g(shù)sap動畫庫實現(xiàn)物體的動畫的文章就介紹到這了,更多相關(guān)three.js 物體動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用pdf-lib.js實現(xiàn)pdf添加自定義水印功能
pdf-lib是一個強大的JavaScript庫,允許在任何JavaScript環(huán)境中創(chuàng)建和修改PDF文檔,下面就跟隨小編一起來學(xué)習(xí)一下如何使用pdf-lib實現(xiàn)pdf添加自定義水印功能吧2024-11-11javascript結(jié)合canvas實現(xiàn)圖片旋轉(zhuǎn)效果
圖片的旋轉(zhuǎn)可以說是一種效果,但是逐漸旋轉(zhuǎn)已經(jīng)不單單是屬于視覺效果那個范疇,其更具有使用性,功能性。照片有時候是需要橫過來的拍的,當(dāng)我們預(yù)覽或共享到web上時需要進行旋轉(zhuǎn)。這個操作在以往可能更多的是交給軟件去完成,然后再將旋轉(zhuǎn)到正常角度的圖片發(fā)布到web上。2015-05-05JavaScript判斷是否為數(shù)字的多種方法小結(jié)
這篇文章主要介紹了JavaScript判斷是否為數(shù)字的多種方法小結(jié),本文給大家分享三種方法,結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01微信小程序?qū)崿F(xiàn)頁面下拉刷新和上拉加載功能詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)頁面下拉刷新和上拉加載功能,結(jié)合實例形式分析了微信小程序頁面下拉刷新和上拉加載相關(guān)事件監(jiān)聽與功能實現(xiàn)操作技巧,需要的朋友可以參考下2018-12-12JavaScript 拖拽實現(xiàn)(附注釋),最經(jīng)典簡單短小精悍!
JavaScript拖拽實現(xiàn)(附注釋),最經(jīng)典!最簡單!短小精悍!2009-04-04javascript中兼容主流瀏覽器的動態(tài)生成iframe方法
這篇文章主要介紹了javascript中兼容主流瀏覽器的動態(tài)生成iframe方法,需要的朋友可以參考下2014-05-05