Threejs之加载3D模型（下）

最新推荐文章于 2024-09-14 16:21:34 发布

你华还是你华

最新推荐文章于 2024-09-14 16:21:34 发布

阅读量590

点赞数 18

分类专栏： ThreeJS 文章标签： 3d 数码相机 webgl threejs 前端

本文链接：https://blog.csdn.net/weixin_44103733/article/details/142223168

版权

ThreeJS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文目录

前言
一、代码示例

前言

本篇博客基于Threejs之加载3D模型（上）追加常用模型加载示例。

一、代码示例

1.1 FBXLoader

构造函数
FBXLoader( filepath, gltfCallback, progressCallback, errorCallback )

1.1.1 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <script type="module">
        // 倒入轨道控制器
        import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
        import * as THREE from 'three';
        import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader';

        // 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xffffff);
        // 创建相机
        const camera = new THREE.PerspectiveCamera( // 透视相机
            45, // 视角 角度数
            window.innerWidth / window.innerHeight, // 宽高比 占据屏幕
            0.1, // 近平面（相机最近能看到物体）
            1000, // 远平面（相机最远能看到物体）
        );
        camera.position.set(0, 2, 60);
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer({
            antialias: true, // 抗锯齿
        });
        // 设置渲染器宽高
        renderer.setSize(window.innerWidth, window.innerHeight);
        // renderer（渲染器）的dom元素添加到我们的HTML文档中
        document.body.appendChild(renderer.domElement);
        // 加入灯光
        const light = new THREE.PointLight(0xffffff, 1200, 100);
        light.position.set(20, 20, 10);
        const pointLightHelper = new THREE.PointLightHelper(light, 3);
        scene.add(pointLightHelper);

        scene.add(light);
        const ambientLight = new THREE.AmbientLight(0x404040, 100); // 柔和的白光
        scene.add(ambientLight);
        // 地面
        const plane = new THREE.Mesh(
            new THREE.PlaneGeometry(80, 80),
            new THREE.MeshStandardMaterial({ color: 0x817936 })
        );
        plane.rotation.x = -Math.PI / 2;
        // 添加到场景中
        scene.add(plane);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap; // 更好的阴影质量
        renderer.shadowMap.needsUpdate = true;
        plane.receiveShadow = true;
        light.castShadow = true;

        // 导入fbx模型
        const fbxLoader = new FBXLoader();
        fbxLoader.load('../models/ZombieStandUp.fbx', (fbx) => {
            console.log(fbx);
            fbx.scale.set(0.1, 0.1, 0.1); // 将模型缩放
            fbx.traverse((child) => {
                if (child.isMesh) {
                    console.log(child)
                    child.castShadow = true; // 让模型产生阴影
                    // child.receiveShadow = true; // 让模型接受阴影
                }
            });
            scene.add(fbx);
        })


        // 控制器
        const control = new OrbitControls(camera, renderer.domElement);
        // 开启阻尼惯性，默认值为0.05
        control.enableDamping = true;

        // 渲染循环动画
        function animate() {
            // 在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）
            requestAnimationFrame(animate);
            // 更新控制器。如果没在动画里加上，那必须在摄像机的变换发生任何手动改变后调用
            control.update();
            renderer.render(scene, camera);
        };

        // 执行动画
        animate();
    </script>
</body>

</html>

1.1.2 效果

请添加图片描述
可以看到我们加载了fbx的模型。

1.1.3 动画

由于我们这个模型是有动画的，我们接下来控制它播放动画，添加如下代码：

let mixer;

// 在fbxLoader加载模型回调函数中添加如下代码
// 获取动画数组
const animations = fbx.animations;
// 创建AnimationMixer并播放动画
mixer = new THREE.AnimationMixer(fbx);
if (animations && animations.length > 0) {
   const clip = animations[0];
   const action = mixer.clipAction(clip);
   action.play(); // 播放动画
 }

// 在animate循环渲染动画中加入如下代码
// 更新动画
if (mixer) {
   mixer.update(0.01);
}

1.1.3.1 动画效果

请添加图片描述

1.2 ColladaLoader

构造函数
ColladaLoader( filepath, gltfCallback, progressCallback, errorCallback )

1.2.1 代码

在上面代码的基础上，加入导入dae模型的代码：

import { ColladaLoader } from 'three/examples/jsm/loaders/ColladaLoader.js';

        // 导入dae模型
        const loader = new ColladaLoader();
        loader.load(
            '../models/Romeo_Zombie.dae', // COLLADA文件路径  
            function (collada) {
                console.log(collada)
                collada.scene.scale.set(0.1,0.1,0.1);
                // 将场景中的对象添加到Three.js场景中（假设已有一个名为threeScene的场景）  
                scene.add(collada.scene);// 加载的场景  
                // 如果模型包含动画，可以进一步处理动画  
                // ...  
            },
            function (xhr) {
                // 加载进度回调（可选）  
                console.log((xhr.loaded / xhr.total * 100) + '% loaded');
            },
            function (error) {
                // 加载错误回调（可选）  
                console.error('An error happened', error);
            }
        );