当前位置: 首页> 汽车> 车展 > Threejs之加载3D模型(下)

Threejs之加载3D模型(下)

时间:2025/7/11 14:54:29来源:https://blog.csdn.net/weixin_44103733/article/details/142223168 浏览次数: 0次

本文目录

  • 前言
  • 一、代码示例
    • 1.1 FBXLoader
      • 1.1.1 代码
      • 1.1.2 效果
      • 1.1.3 动画
        • 1.1.3.1 动画效果
    • 1.2 ColladaLoader
      • 1.2.1 代码
      • 1.2.2 效果

前言

本篇博客基于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.05control.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);});

1.2.2 效果

请添加图片描述

在学习的路上,如果你觉得本文对你有所帮助的话,那就请关注点赞评论三连吧,谢谢,你的肯定是我写博的另一个支持。

关键字:Threejs之加载3D模型(下)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: