WebGL基础(7)GSAP动画库的基本使用
<template> <div class="home"> <div id="threeContainer" class="threeContainer"></div> </div> </template> <script> import * as THREE from 'three' import gsap from 'gsap' // 导入动画库 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' // 导入轨道控制器 export default { name: 'Home', data () { return { scene: null, //场景对象 camera: null, //相机对象 cube: null, //物体 controls: null, // 控制器 renderer: null, //渲染器对象 clock: null, //跟踪时间 } }, mounted () { this.init() }, methods: { init () { // 1. 创建场景 this.scene = new THREE.Scene() // 2. 创建相机 this.camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ) this.camera.position.set( 0, 0, 10 ) // 设置相机位置 this.scene.add(this.camera) // 3. 添加物体 // 创建几何体 const geometry = new THREE.BoxGeometry() const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} ) // 根据几何体和材质创建物体 this.cube = new THREE.Mesh( geometry, material ) // 修改物体的位置 // this.cube.position.set(5, 0, 0) // this.cube.position.x = 3 // 物体的缩放 // this.cube.scale.set(3, 2, 1) // this.cube.scale.x = 5 // 物体的旋转 // this.cube.rotation.set(Math.PI / 4, 0, 0) // this.cube.scale.x = 5 // 将几何体添加到场景中 this.scene.add( this.cube ) // 4. 初始化渲染器 this.renderer = new THREE.WebGLRenderer() // 设置渲染器的尺寸大小 this.renderer.setSize( window.innerWidth, window.innerHeight ) // 将webgl渲染的canvas内容添加到body中 document.getElementById('threeContainer').appendChild( this.renderer.domElement ) // // 使用渲染器 通过相机将场景渲染出来 // this.renderer.render( this.scene, this.camera ) // 创建轨道控制器 this.controls = new OrbitControls( this.camera, this.renderer.domElement ) // 设置控制器阻尼,让控制器更真实 this.controls.enableDamping = true // 添加坐标轴辅助器 const axesHelper = new THREE.AxesHelper( 5 ) this.scene.add( axesHelper ) // 设置时钟 this.clock = new THREE.Clock() // 设置动画 var animate1 = gsap.to(this.cube.position, { x: 5, duration: 5, ease: 'power1.inOut', repeat: 2, // 设置重复次数 -1一直重复 yoyo: true, // 往返运动 delay: 0, // 延迟 onStart: () => { console.log('动画开始') }, onComplete: () => { console.log('动画完成') } }) gsap.to(this.cube.rotation, { x: 2 * Math.PI, duration: 5, ease: 'power1.inOut', }) window.addEventListener('dblclick', () => { if (animate1.isActive()) { // 判断是否正在开始动画 animate1.pause() // 停止动画 } else { animate1.pauresumese() // 开始动画 } }) // 渲染函数 this.render() }, // 渲染函数 render () { this.controls.update() this.renderer.render( this.scene, this.camera ) // 渲染下一帧的时候就会调用render函数 requestAnimationFrame( this.render ) } } } </script>