gsap动画库的使用

1.首先安装gsap

npm install gsap

2.引入gsap动画库

import gsap from "gsap"

3.使用

<script setup>

//导入Three.js

import * as Three from 'three'

//导入轨道控制器

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

//导入gsap动画库

import gsap from "gsap"

import { onMounted, reactive, toRefs } from 'vue';

let scene = null,

    camera = null,

    renderer = null,

    cube = null

const init = () => {

    //创建场景

    let container = document.getElementById('container');

    scene = new Three.Scene()

    //创建相机（角度，容器的宽高比，视锥体近端，视锥体远端）

    camera = new Three.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.01, 1000)

    //设置相机位置(x,y,z)

    camera.position.set(0, 0, 10)

    //将相机添加到场景中

    scene.add(camera)

    //添加物体

    //创建几何体

    const cubeGeometry = new Three.BoxGeometry(1, 1, 1)

    //材质

    // const cubeMaterial = new Three.MeshBasicMaterial({ color: 0xffff00 })

    const cubeMaterial = new Three.MeshNormalMaterial()

    //根据几何材质创建物体

    cube = new Three.Mesh(cubeGeometry, cubeMaterial)

    //将几何体添加到场景中

    scene.add(cube)

    //初始化渲染器

    renderer = new Three.WebGLRenderer()

    //设置渲染的尺寸大小

    renderer.setSize(container.clientWidth, container.clientHeight)

    // console.log(renderer);

    //将webgl渲染的canvas内容添加到id为container的div上

    container.appendChild(renderer.domElement);

    //使用渲染器，通过相机将场景渲染进来

    // renderer.render(scene, camera);

    //创建轨道控制器

    const controls = new OrbitControls(camera, renderer.domElement)

    // //添加坐标轴辅助器

    const axesHelper = new Three.AxesHelper(5)

    scene.add(axesHelper)

    //实现三维物体移动

    //修改物体的位置(x,y,z)

    // cube.position.set(0, 0, 5)

    // cube.position.x = 3

    //设置缩放

    // cube.scale.set(3, 2, 1)

    // cube.scale.x = 5

    //旋转,xzy旋转轴的顺序，可不传

    cube.rotation.set(Math.PI / 4, 0, 0, 'XZY')

    //设置动画（gsap）

    //移动  {坐标轴：距离，时间：时间,ease:速度}  速度（默认匀速）

    gsap.to(cube.position, { x: 5, duration: 5, ease: "power1.inOut" })

    //旋转

    gsap.to(cube.rotation, { x: 2 * Math.PI, duration: 5, ease: "power1.inOut" })

}

let flag = true

//设置时钟

const Clock = new Three.Clock()

const animate1 = () => {

    requestAnimationFrame(animate1);//每一帧重新渲染（渲染下一帧的时候调用animate1函数）

    renderer.render(scene, camera);

}

onMounted(() => {

    init()

    animate1()

})

</script>

<template>

    <div id="container"></div>

</template>

<style scoped>

#container {

    height: 100%;

}

</style>