thee.js keyframes模块详解_es module shims 1.3.6-CSDN博客

本文链接：https://blog.csdn.net/weixin_63722092/article/details/130080388

第一步下载three.js官方包

使用vscode打开

找到examples 列子

搜索 keyframes ，找到该文件后使用本地终端跑起来，不用终端会报错

vscode可以用插件 Live Server

剩下的，通过注释一行一行了解

<html lang="en">

<head>
    <title>模板练习</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
    <style>
        body {
            background-color: #bfe3dd;
            color: #000;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <!-- 引入tree.js -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    <!-- 这边配置后才可以用es6的方式引入 -->
    <script type="importmap">
			{
				"imports": {
					"three": "../build/three.module.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>
    <script type="module">
        // 准备开始
        // 1，引入需要的api
        import * as THREE from 'three'
        import Stats from 'three/addons/libs/stats.module.js'
        // 控制器api
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        // 模型色彩api
        import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
        // 模型格式所需的loader文件
        import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
        import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
        let mixer; //小火车
        let clock = new THREE.Clock() //获取时间信息

        // 2,拿到页面dom元素
        const container = document.getElementById('container')

        // 3,创建webGl渲染器，用于渲染模板
        const renderer = new THREE.WebGLRenderer({
            antialias: true //渲染时添加抗锯齿效果，让识图更加流畅
        })

        // 4，配置渲染器设置
        renderer.setPixelRatio(window.devicePixelRatio) //渲染器的像素单位和window一样

        renderer.setSize(window.innerWidth, window.innerHeight) //渲染器的尺寸和window一样

        renderer.outputEncoding = THREE.sRGBEncoding //转换渲染器色彩编码格式

        container.appendChild(renderer.domElement) //配置完毕，把渲染器放入标签

        // 5，设置渲染器中的场景,简称“场景”
        const scene = new THREE.Scene() //创建场景

        scene.background = new THREE.Color(0xbfe3dd) //场景背景色

        const pmremGenerator = new THREE.PMREMGenerator(renderer); //给里面的模型添加高亮

        scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.01).texture; //添加色彩

        // 6，添加摄像头“用于观看模型”
        const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 1000)

        camera.position.set(1, 1, 9) //设置摄像头位置

        // 7，设置模型格式
        const dracoLoader = new DRACOLoader()

        dracoLoader.setDecoderPath('jsm/libs/draco/gltf/') //设置路径解压压缩模型

        const loader = new GLTFLoader() //创建gltf格式的模型

        loader.setDRACOLoader(dracoLoader) //把loader模型转为gltf模型



        // 8，导入模型
        loader.load('models/gltf/LittlestTokyo.glb', (gltf) => {
            console.log(gltf);

            const model = gltf.scene // 定义模型

            model.position.set(1, 1, 0) //设置模型位置

            model.scale.set(0.01, 0.01, 0.01) //缩放模型

            scene.add(model) //在场景中添加模型

            mixer = new THREE.AnimationMixer(model); //mixer等于模型动画

            mixer.clipAction(gltf.animations[0]).play();//clipAction选择动画

            animate()

        })

        // 9，控制模型
        const controls = new OrbitControls(camera, renderer.domElement) //获取模型位置

        controls.target.set(0, 1, 0) //目标位置

        controls.enablePan = true; //启用或禁用鼠标右键摄像机平移

        controls.enableDamping = true; //防止滑动卡顿添加阻尼效果

        controls.enableZoom = true; //摄像机放大缩小

        controls.update(); //点击后更新

        // 10, 场景跟随窗口改变
         window.onresize = function () {
             camera.aspect = window.innerWidth / window.innerHeight;
             camera.updateProjectionMatrix();
             renderer.setSize(window.innerWidth, window.innerHeight);
         };

        //  11,调动他们开始运行
        const animate = () => {
            const delta = clock.getDelta()
            mixer.update(delta);
            requestAnimationFrame(animate); //告诉浏览器你希望执行一个动画，和（9）相互对应
            controls.update() //更新位置
            renderer.render(scene, camera) // 渲染模型
        }

    </script>
</body>

</html>