threejs 12 animation动画

Posted 2021-11-22 Jessica巨人

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { AnimationActionLoopStyles, AnimationClip, AnimationMixer, BoxBufferGeometry, Clock, DirectionalLight, HemisphereLight, KeyframeTrack, SphereBufferGeometry, VectorKeyframeTrack } from "three";


var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色

window.addEventListener("resize", () => {//窗口大小变化事件
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    //设置了aspect  必须更新相机的投影矩阵
    camera.updateProjectionMatrix();
})

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();
// var light = new DirectionalLight();
var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);

scene.add(new THREE.AxesHelper(10000));

var cubeGeometry = new BoxBufferGeometry(5, 6, 7);
var material = new THREE.MeshPhongMaterial();
var cubeMesh = new THREE.Mesh(cubeGeometry, material)
scene.add(cubeMesh);

//---------------------------------------------------------------------------------------------------------------
/**
 * threejs里面实现一个动画
 * 1.Animation Clips   动画片段 一个动画可以表示一个动作
 * 2.Keyframe Tracks 关键帧(轨迹)序列  就是关键帧的集合
 * 关键帧 在相应的帧设置相应帧  两个关键帧之间的动作建模软件可以自动插值
 * 3 Animation Mixer动画合成器  可以把同一时间点的多个动作进行混合
 * 
 * THREE提供以下的关键帧 ，他们都继承自KeyframeTrack
 * name 关键帧的名字  可以使绑定我要做模型动画主题模型的属性
 * times 关键序列的时间
 * values 不同时间片段的值
 * interpolation 两个帧之间的插值方式
 * KeyframeTrack(name: string, times: ArrayLike<any>, values: ArrayLike<any>, interpolation?: InterpolationModes）
 * 
 * BooleanKeyframeTrack
ColorKeyframeTrack
NumberKeyframeTrack
QuaternionKeyframeTrack
StringKeyframeTrack  到某个时间点的时候变成了另外一个值
VectorKeyframeTrack
 */

var positionKF = new THREE.VectorKeyframeTrack('.position', [0, 1], [0, 0, 0, 30, 0, 0,]);

/**
 * name?: string, 片段的名字
 *  duration?: number,  片段的时长
 * tracks?: THREE.KeyframeTrack[] 使我们关键帧序列的合集
 */
var animationClip = new AnimationClip("default", 2, [positionKF])

var animationMixer = new AnimationMixer(cubeMesh);
/**
 * 使用AnimationClip生产AnimationAction
 */
var aniAction = animationMixer.clipAction(animationClip)
aniAction.play();

aniAction.setLoop(THREE.LoopPingPong)
var clock = new Clock();

update()

function update() {
    console.log('刷新')
    var delta = clock.getDelta();
    animationMixer.update(delta);
    renderer.render(scene, camera);
    requestAnimationFrame(update);//不会卡塞，专门针对图形渲染刷新的方法
}

位置、大小、形状动画变化

import * as THREE from "three"
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import { AnimationActionLoopStyles, AnimationClip, AnimationMixer, BoxBufferGeometry, Clock, DirectionalLight, HemisphereLight, KeyframeTrack, SphereBufferGeometry, VectorKeyframeTrack } from "three";


var renderer = new THREE.WebGLRenderer({ antialias: true });
// renderer.domElement;//是一个canvas 可以从参数传入
document.body.appendChild(renderer.domElement);

renderer.setSize(window.innerWidth, window.innerHeight);//设置画布高宽
renderer.setClearColor(0xffffff);//设置背景清空颜色

window.addEventListener("resize", () => {//窗口大小变化事件
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    //设置了aspect  必须更新相机的投影矩阵
    camera.updateProjectionMatrix();
})

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 50)
var control = new OrbitControls(camera, renderer.domElement);
var scene = new THREE.Scene();
// var light = new DirectionalLight();
var light = new HemisphereLight(0xffffff, 0x444444);
scene.add(light);

scene.add(new THREE.AxesHelper(10000));

var cubeGeometry = new BoxBufferGeometry(5, 6, 7);
var material = new THREE.MeshPhongMaterial();
var cubeMesh = new THREE.Mesh(cubeGeometry, material)
scene.add(cubeMesh);


/**
 * threejs里面实现一个动画
 * 1.Animation Clips   动画片段 一个动画可以表示一个动作
 * 2.Keyframe Tracks 关键帧(轨迹)序列  就是关键帧的集合
 * 关键帧 在相应的帧设置相应帧  两个关键帧之间的动作建模软件可以自动插值
 * 3 Animation Mixer动画合成器  可以把同一时间点的多个动作进行混合
 * 
 * THREE提供以下的关键帧 ，他们都继承自KeyframeTrack
 * name 关键帧的名字  可以使绑定我要做模型动画主题模型的属性
 * times 关键序列的时间
 * values 不同时间片段的值
 * interpolation 两个帧之间的插值方式
 * KeyframeTrack(name: string, times: ArrayLike<any>, values: ArrayLike<any>, interpolation?: InterpolationModes）
 * 
 * BooleanKeyframeTrack
ColorKeyframeTrack
NumberKeyframeTrack
QuaternionKeyframeTrack
StringKeyframeTrack  到某个时间点的时候变成了另外一个值
VectorKeyframeTrack
 */

var positionKF = new THREE.VectorKeyframeTrack('.position', [0, 1], [0, 0, 0, 30, 0, 0,]);
var scaleKF = new THREE.VectorKeyframeTrack('.scale', [0, 1], [1, 1, 1, 10, 1, 1,]);
var colorKF = new THREE.ColorKeyframeTrack('.material.color4 ', [0, 1], [1, 1, 1, 0, 0.5, 1,]);
var visibleKF = new THREE.BooleanKeyframeTrack('.visible', [0, 1, 2], [true, false, false]);
var stringKF = new THREE.BooleanKeyframeTrack('.name', [0, 1, 2], ["白天", "晚上", "晚上"]);

/**
 * name?: string, 片段的名字
 *  duration?: number,  片段的时长
 * tracks?: THREE.KeyframeTrack[] 使我们关键帧序列的合集
 */
var animationClip = new AnimationClip("default", 2, [positionKF, scaleKF, colorKF, visibleKF])

var animationMixer = new AnimationMixer(cubeMesh);
/**
 * 使用AnimationClip生产AnimationAction
 */
var aniAction = animationMixer.clipAction(animationClip)
aniAction.play();
/**
 * export enum AnimationActionLoopStyles {}
export const LoopOnce: AnimationActionLoopStyles;  只播放一次
export const LoopRepeat: AnimationActionLoopStyles; 重复播放
export const LoopPingPong: AnimationActionLoopStyles; 来回播放
 */
aniAction.setLoop(THREE.LoopPingPong)
var clock = new Clock();

update()

function update() {
    console.log('刷新')
    var delta = clock.getDelta();
    animationMixer.update(delta);
    renderer.render(scene, camera);
    requestAnimationFrame(update);//不会卡塞，专门针对图形渲染刷新的方法
}