TWEEN在ThreeJs的基本使用

<script setup>

import * as THREE from "three";

// 导入轨道控制器

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 引入tween

import * as TWEEN from 'three/examples/jsm/libs/tween.module.js'

// console.log(THREE);

// 目标：了解three.js最基本的内容

// 1、创建场景

const scene = new THREE.Scene();

// 2、创建相机

const camera = new THREE.PerspectiveCamera(

  45,

  window.innerWidth / window.innerHeight,

  0.1,

  1000

);

// 设置相机位置

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

scene.add(camera);

// 初始化渲染器

const renderer = new THREE.WebGLRenderer();

// 设置渲染的尺寸大小

renderer.setSize(window.innerWidth, window.innerHeight);

// console.log(renderer);

// 将webgl渲染的canvas内容添加到body

document.body.appendChild(renderer.domElement);

// 创建轨道控制器

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

// 添加坐标轴辅助器

const axesHelper = new THREE.AxesHelper(5);

scene.add(axesHelper);

// 添加物体

// 创建几何体

const cubeGeometry = new THREE.SphereGeometry(1, 10, 10);

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 ,wireframe: true});

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

const cube = new THREE.Mesh(cubeGeometry, material);

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

scene.add(cube);

 

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

function render() {

  //如果后期需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入controls.update()

  controls.update()

  renderer.render(scene, camera);

  //   渲染下一帧的时候就会调用render函数

  requestAnimationFrame(render);  

  //在渲染函数中渲染TWEEN

  TWEEN.update()

}

window.addEventListener('resize', onWindowResize, false);  

 

// 定义窗口大小改变时的回调函数  

function onWindowResize() {  

  // 获取窗口大小  

  var width = window.innerWidth;  

  var height = window.innerHeight;  

  // 设置相机投影矩阵的宽高比和视口大小  

  camera.aspect = width / height;  

  camera.updateProjectionMatrix();  

  renderer.setSize(width, height);  

}

render();

const tween = new TWEEN.Tween(cube.position);

// 设置动画位置，设置动画次数，设置动画往返。

tween.to({x:4},2000)

// 设置缓动动画

tween.easing(TWEEN.Easing.Quadratic.InOut)

 

let tween2 = new TWEEN.Tween(cube.position)

tween2.to({x:0},2000)

//收尾连接跟 yoyo()效果一样

tween.chain(tween2)

tween2.chain(tween)

// 启用补间动画

tween.start();

</script>

 

<template></template>

<script>

export default {};

</script>

<style>

</style>