当前位置：首页 > news >正文

Three.js之加载外部三维模型

news 2025/11/6 5:54:55

参考资料

建模软件绘制3D场景
…
加载.gltf文件(模型加载全流程)

知识点

注：基于Three.jsv0.155.0

三维建模软件
gltf格式
加载.gltf文件

三维建模软件

D美术常用的三维建模软件，比如Blender、3dmax、C4D、maya等等

Blender(轻量开源)
3dmax
C4D
maya

特殊行业项目可能涉及到行业软件，比如机械相关、建筑相关

机械相关：SW、UG等
建筑相关：草图大师、revit

gltf格式

GLTF格式是新2015发布的三维模型格式，随着物联网、WebGL、5G的进一步发展，会有越来越多的互联网项目Web端引入3D元素，你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样，现在的网站，图片基本是标配，对于以后的网站来说如果需要展示一个场景，使用3D来替换图片表达也是很正常的事情。图片有很多格式，对于三维模型自然也是如此，Web开发的时候图片会有常用格式，对于Web3D开发也一样，肯定会根据需要选择一个常见的大家都熟悉的格式，随时时间的发展，GLTF必然称为一个极为重要的标准格式。

不仅three.js，其它的WebGL三维引擎cesium、babylonjs都对gltf格式有良好的的支持。

gltf格式文件不一定就是以扩展名.gltf结尾，.glb就是gltf格式的二进制文件。比如你可以把.gltf模型和贴图信息全部合成得到一个.glb文件中，.glb文件相对.gltf文件体积更小，网络传输自然更快。

加载.gltf文件

gltf模型加载器GLTFLoader.js
相机参数根据需要设置
加载gltf的时候，webgl渲染器编码方式设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Three.js</title>
</head><body></body><!-- 具体路径配置，你根据自己文件目录设置，我的是课件中源码形式 --><script type="importmap">{"imports": {"three": "./js/three.module.js","three/addons/": "../three.js/examples/jsm/"}}</script><script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';const width = window.innerWidthconst height = window.innerHeight// 场景const scene = new THREE.Scene();const loader = new GLTFLoader();// 加载工厂文件loader.load('assets/工厂.gltf', function(gltf) {// 模型const model = gltf.scene;scene.add(model);})// 点光源const pointLight = new THREE.PointLight( 0xffffff, 1.0, 0, 0);pointLight.position.set(200, 200, 200 );scene.add( pointLight );// 环境光const ambientLight = new THREE.AmbientLight( 0xffffff, 1);scene.add( ambientLight );// 坐标系const axes = new THREE.AxesHelper(200);scene.add(axes);// 相机const camera = new THREE.PerspectiveCamera(75, width/height, 0.1, 3000);camera.position.set(100, 100, 100);camera.lookAt(0, 0, 0);// camera.lookAt(100, 0, 0);// 渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(width, height);renderer.render(scene, camera);document.body.appendChild(renderer.domElement);renderer.outputColorSpace = THREE.SRGBColorSpace;// 渲染循环function render() {renderer.render(scene, camera);requestAnimationFrame(render);}render();// 控制器const controls = new OrbitControls(camera, renderer.domElement);// controls.target.set(100, 0, 0);// controls.update();//update()函数内会执行camera.lookAt(controls.targe)controls.addEventListener('change', () => {// 因为动画渲染了，所以这里可以省略renderer.render(scene, camera);});</script>
</html>

Three.js之加载外部三维模型

参考资料

知识点

三维建模软件

gltf格式

加载.gltf文件

相关文章：

Three.js之加载外部三维模型

【机器学习】正规方程与梯度下降API及案例预测

【SOC基础】单片机学习案例汇总 Part2：蜂鸣器、数码管显示

顶层模块【FPGA】

IT行业就业分析

读取用户剪贴板内容

“深入理解Nginx的负载均衡与动静分离“

JVM 内存和 GC 算法

memtest86 prosite v10.6

Springboot JSP项目如何以war、jar方式运行

系统架构设计师（第二版）学习笔记----层次式架构设计理论与实践

Python之字符串详解

《视觉SLAM十四讲》-- 概述与预备知识

Java8 Stream API全面解析——高效流式编程的秘诀

分享一下微信小程序里怎么开店

uniapp小程序刮刮乐抽奖

Qt 窗口无法移出屏幕

java毕业设计基于springboot+vue线上教学辅助系统

开源 Wiki 软件 wiki.js

STM32基本定时器中断

业务系统对接大模型的基础方案：架构设计与关键步骤

LeetCode - 394. 字符串解码

对WWDC 2025 Keynote 内容的预测

ardupilot 开发环境eclipse 中import 缺少C++

uniapp 字符包含的相关方法

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

API网关Kong的鉴权与限流：高并发场景下的核心实践

LLaMA-Factory 微调 Qwen2-VL 进行人脸情感识别（二）

若依登录用户名和密码加密

图解JavaScript原型：原型链及其分析 | JavaScript图解