加载GLTF模型和使用tween补间动画【从0开始到秋招就业2】

前言

        本节博客主要是加载一下模型以及添加相机控制器、补间动画、辅助（gui和stats）

关于模型：

        格式为GLTF，是three推荐的一个格式，传输快。

引入模块

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';//引入模块

var loader = new GLTFLoader();
        loader.load('../public/GLTF/windmill/scene.gltf', function (gltf) {
            gltf.scene.scale.set(100,100,100);
            scene.add(gltf.scene);
        });

备注：模型要放在public目录下

关于gltf的话有一个scene的属性，可以通过打印出对象查看

相机控制器：

import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

 control = new OrbitControls(camera, renderer.domElement);
 control.update(); //需要进行相机位置的更新，把他放在render函数下

辅助的东西

import { GUI } from 'three/addons/libs/lil-gui.module.min.js'; //UI框架辅助
import Stats from 'three/addons/libs/stats.module.js'; //显示帧率
        var gui = new GUI();
        const guitest = {
            start:function(){
                tween.start()
            }
        }
        gui.addFolder( "四棱锥").add(guitest,"start").name("开始动画")

stats = new Stats();
document.body.appendChild(stats.dom);

关于补间动画我是通过npm install @tween/tween.js 安装这么一个包，通过GUI控制动画。

         //直接链式实现tween
                tween = new TWEEN.Tween(cylinder.position).to({x:0, y:70, z:0}, 1500);
                var tween2 = new TWEEN.Tween(cylinder.position).to({x:0, y:60, z:0}, 1500);
                tween.chain(tween2);
                tween2.chain(tween)

这里实现了一个四棱锥上下循环运动的动画

 

总结

        下一步是打算做一个可交互的光源，然后一个绕着原点旋转的东西，比如火车呀，水流之类的（哈哈，不一定能做出来，先画个饼）。