gsap应用之threejs动画效果

import * as THREE from 'three'

import gsap from 'gsap'

// Canvas

const canvas = document.querySelector('canvas.webgl')

// Scene

const scene = new THREE.Scene()

// Object

const geometry = new THREE.BoxGeometry(1, 1, 1)

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })

const mesh = new THREE.Mesh(geometry, material)

scene.add(mesh)

// animation

const animations = () => {

// 这里将mesh的x坐标，进行从0-》2-》0,实现这样子一个简单的动画效果

    gsap.to(mesh.position, { duration: 1, delay: 1, x: 2 })

    gsap.to(mesh.position, { duration: 1, delay: 2, x: 0 })

}

animations()

// Sizes

const sizes = {

    width: 800,

    height: 600

}

// Camera

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)

camera.position.z = 3

scene.add(camera)

// Renderer

const renderer = new THREE.WebGLRenderer({

    canvas: canvas

})

const tick = () => {

    renderer.render(scene, camera)

    window.requestAnimationFrame(tick)

    // 动画一定需要配合帧动画请求！！！

}

tick()

renderer.setSize(sizes.width, sizes.height)