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

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

news 2026/5/22 3:10:50

参考资料

  • 建模软件绘制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文件

  1. gltf模型加载器GLTFLoader.js
  2. 相机参数根据需要设置
  3. 加载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之加载外部三维模型

参考资料 建模软件绘制3D场景…加载.gltf文件(模型加载全流程) 知识点 注&#xff1a;基于Three.jsv0.155.0 三维建模软件gltf格式加载.gltf文件 三维建模软件 D美术常用的三维建模软件&#xff0c;比如Blender、3dmax、C4D、maya等等 Blender(轻量开源)3dmaxC4Dmaya 特…...

编程日记 2023/11/5 2:52:35

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

正规方程与梯度下降API及案例预测 文章目录 正规方程与梯度下降API及案例预测1. 正规方程与梯度下降正规方程&#xff08;Normal Equation&#xff09;梯度下降&#xff08;Gradient Descent&#xff09; 2. API3. 波士顿房价预测 1. 正规方程与梯度下降 回归模型是机器学习中…...

编程日记 2023/11/5 2:51:34

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

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…...

编程日记 2023/11/5 2:50:33

顶层模块【FPGA】

1顶层模块&#xff1a; 不能像C语言的h文件那样&#xff0c;把io的定义放在其他文件。 在Verilog中&#xff0c;顶层模块是整个设计的最高层次&#xff0c;它包含了所有其他模块和子模块。 顶层模块定义了整个设计的输入和输出端口&#xff0c;以及各个子模块之间的连接方式。…...

编程日记 2023/11/5 2:49:32

IT行业就业分析

1. IT技术发展背景及历程介绍 2. IT行业的就业方向有哪些&#xff1f; IT技术发展背景及历程介绍&#xff1a; IT技术的发展背景和历程可以追溯到上世纪40年代&#xff0c;以下是IT技术的主要发展阶段&#xff1a; 1.计算机的发展&#xff1a;二战期间&#xff0c;计算机作…...

编程日记 2023/11/5 2:48:28

读取用户剪贴板内容

读取用户剪贴板内容 在Web开发中&#xff0c;要读取用户剪贴板的内容&#xff0c;可以使用Clipboard API。这个API提供了一组方法和事件&#xff0c;用于访问和操作用户的剪贴板数据。 HTML <body><button onclick"readClipboard()">读取剪切板内容&l…...

编程日记 2023/11/5 2:47:26

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

目录 引言一、Nginx简介1. Nginx的基本概念2. Nginx的特点3. Nginx的安装配置 二、Nginx搭载负载均衡三、前端项目打包四、Nginx部署前后端分离项目&#xff0c;同时实现负载均衡和动静分离总结 引言 在现代互联网应用中&#xff0c;高性能和可扩展性是至关重要的。Nginx作为一…...

编程日记 2023/11/5 2:46:25

JVM 内存和 GC 算法

文章目录 内存布局直接内存执行引擎解释器JIT 即时编译器JIT 分类AOT 静态提前编译器&#xff08;Ahead Of Time Compiler&#xff09; GC什么是垃圾为什么要GC垃圾回收行为Java GC 主要关注的区域对象的 finalization 机制GC 相关算法引用计数算法&#xff08;Reference Count…...

编程日记 2023/11/5 2:45:23

memtest86 prosite v10.6

passmark官方的memtest86 v10开始支持颗粒级别的坏内存芯片定位了&#xff0c;对于特定的若干种CPU和芯片组的组合&#xff0c;支持这项功能。 当然支持颗粒定位的site版本售价4800美金&#xff0c;是比较贵的。所以网络上出现了破解版的&#xff0c;人才真是。但是鼓励大家支…...

编程日记 2023/11/5 2:43:20

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

文章目录 一&#xff0c;序二&#xff0c;样例代码1&#xff0c;代码结构2&#xff0c;完整代码备份 三&#xff0c;准备工作1. pom.xml 引入组件2. application.yml 指定jsp配置 四&#xff0c;war方式运行1. 修改pom.xml文件2. mvn执行打包 五&#xff0c;jar方式运行1. 修改…...

编程日记 2023/11/5 2:42:19

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

【原文链接】系统架构设计师&#xff08;第二版&#xff09;学习笔记----层次式架构设计理论与实践 文章目录 一、层次式体系结构概述1.1 软件体系结构的作用1.2 常用的层次式架构图1.3 层次式体系可能存在的问题点 二、表现层框架设计2.1 MVC模式2.1.1 MVC三层模式2.1.2 MVC设…...

编程日记 2023/11/5 2:41:17

Python之字符串详解

目录 一、字符串1、转义字符与原始字符串2、使用%运算符进行格式化 一、字符串 在Python中&#xff0c;字符串属于不可变、有序序列&#xff0c;使用单引号、双引号、三单引号或三双引号作为定界符&#xff0c;并且不同的定界符之间可以互相嵌套。 ‘abc’、‘123’、‘中国’…...

编程日记 2023/11/5 2:40:13

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

文章目录 01 概述与预备知识1.1 SLAM 是什么1.1.1 基本概念1.1.2 视觉 SLAM 框架1.1.3 SLAM 问题的数学表述 1.2 实践&#xff1a;编程基基础1.3 课后习题 01 概述与预备知识 1.1 SLAM 是什么 1.1.1 基本概念 &#xff08;1&#xff09;SLAM 是 Simultaneous Localization a…...

编程日记 2023/11/5 2:39:12

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

文章目录 什么是 Stream Api?快速入门流的操作创建流中间操作filter 过滤map 数据转换flatMap 合并流distinct 去重sorted 排序limit 限流skip 跳过peek 操作 终结操作forEach 遍历forEachOrdered 有序遍历count 统计数量min 最小值max 最大值reduce 聚合collect 收集anyMatch…...

编程日记 2023/11/5 2:38:11

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

如何在微信小程序中成功开店&#xff1a;从选品到运营的全方位指南 一、引言 随着微信小程序的日益普及&#xff0c;越来越多的人开始尝试在微信小程序中开设自己的店铺。微信小程序具有便捷、易用、即用即走等特点&#xff0c;使得开店门槛大大降低。本文将详细介绍如何在微…...

编程日记 2023/11/5 2:37:09

uniapp小程序刮刮乐抽奖

使用canvas画布画出刮刮乐要被刮的图片&#xff0c;使用移动清除画布。 当前代码封装为刮刮乐的组件&#xff1b; vue代码&#xff1a; <template><view class"page" v-if"merchantInfo.cdn_static"><image class"bg" :src&q…...

编程日记 2023/11/5 2:36:08

Qt 窗口无法移出屏幕

1 使用场景 设计一个缩进/展开widget的效果&#xff0c;抽屉效果。 看到实现的方法有定时器里move窗口&#xff0c;或是使用QPropertyAnimation。 setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint |Qt::X11BypassWindowManagerHint&#xff09;&#xff1b; 记得在移…...

编程日记 2023/11/5 2:35:08

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

项目介绍 本论文主要论述了如何使用JAVA语言开发一个线上教学辅助系统 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述线上教学辅助系统的当前背景以及系统开…...

编程日记 2023/11/5 2:34:05

开源 Wiki 软件 wiki.js

wiki.js简介 最强大、 可扩展的开源Wiki 软件。使用 Wiki.js 美观直观的界面让编写文档成为一种乐趣&#xff01;根据 AGPL-v3 许可证发布。 官方网站&#xff1a;https://js.wiki/ 项目地址&#xff1a;https://github.com/requarks/wiki 主要特性&#xff1a; 随处安装&a…...

编程日记 2023/11/5 2:33:04

STM32基本定时器中断

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、STM32定时器的结构&#xff1f;1. 51定时器的结构1.1如何实现定时1s的功能&#xff1f; 2. stm32定时器的结构2.1 通用定时器 二、使用步骤1.开启时钟2.初始…...

编程日记 2023/11/5 2:32:02

kafka安装与可视化工具offset explore连接操作说明

1.1 环境前置要求 本地部署 Kafka 4.0 极简&#xff0c;无复杂依赖&#xff0c;只需满足 1 个核心条件&#xff1a; 本地已安装 JDK 17 及以上版本&#xff08;推荐 JDK 17&#xff09;&#xff0c;并配置好 Java 环境变量&#xff08;能在命令行执行 java -version 和 javac -…...

编程新知 2026/5/22 3:00:07

Godot 4.x RTS游戏开发实战：从MVP内核到千单位性能优化

1. 这不是又一个“Godot入门教程”&#xff0c;而是一份专为RTS开发者准备的实战切片你有没有试过在Godot里拖一个Unit节点&#xff0c;加个move_and_slide()&#xff0c;然后兴冲冲地拉出十个单位——结果它们像被磁铁吸住一样挤成一团&#xff0c;路径重叠、碰撞卡死、指令延…...

编程新知 2026/5/22 2:21:35

好用的山西GEO服务商

你可能已经感受到&#xff1a;当客户在AI大模型里问“山西哪家GEO优化公司靠谱&#xff1f;”、“中小企业如何用AI引流”时&#xff0c;你的企业信息根本搜不到。流量入口变了&#xff0c;传统SEO正在失效。如果能选对一家GEO服务商&#xff0c;就能在这个新战场里抢占先机。我…...

编程新知 2026/5/22 1:42:19

维萨报告：AI 加速诈骗成消费者新危害，企业需提速应对

AI 加速类 ClickFix 诈骗还记得 ClickFix 吗&#xff1f;这是近年来流行的一种社会工程技术&#xff0c;它通过利用心理弱点绕过传统的网络钓鱼防御。在 ClickFix 攻击中&#xff0c;受害者会被呈现一个看似容易解决的问题&#xff0c;从而诱使他们自己执行恶意操作。例如&…...

编程新知 2026/5/22 1:38:14

微信虚拟支付接入（道具支付）

1.描述本文档为最近因微信虚拟支付之前使用的是普通微信支付&#xff08;旧模式的支付&#xff1a;wx.requestPayment&#xff09;此类支付其实只适用于实物商品&#xff0c;ios端不支持&#xff08;会被封禁&#xff09;&#xff1b;因其费率更低&#xff08;大概在0.6%&#…...

编程新知 2026/5/22 1:22:00

开源 AI Agent Harness Engineering 模型与闭源模型的对比

开源 AI Agent Harness Engineering 模型与闭源模型的对比 摘要 如果把AI Agent比作自动驾驶汽车&#xff0c;那么AI Agent Harness就是这辆车的操作系统&#xff1a;它负责管控任务规划、工具调用、记忆管理、容错重试等所有核心逻辑&#xff0c;是Agent落地工程化的核心支撑…...

编程新知 2026/5/22 0:20:16

AI+HR 全生命周期智能管理实战指南：从概念到落地，解锁组织效能新增长！​

在企业数字化转型的浪潮中&#xff0c;人力资源管理正经历着前所未有的变革。据行业数据&#xff0c;61% 的 HR 领导者已进入 GenAI 实施进阶阶段&#xff0c;82% 的企业计划在 12 个月内部署 AI 智能体&#xff0c;而 AI 驱动的企业人均效能已实现3.2 倍提升。当传统 HR 深陷事…...

编程新知 2026/5/21 22:24:31

D2001UK，1GHz频段下2.5W高功率输出的单端式硅DMOS RF FET射频晶体管

简介今天我要向大家介绍的是 Semelab 的硅DMOS RF FET晶体管——D2001UK。这是一款专为VHF/UHF通信频段&#xff08;50 MHz至1 GHz&#xff09;设计的单端式射频功率场效应管&#xff0c;在28V工作电压、1GHz频率下可提供2.5W的输出功率。作为一款高性能射频器件&#xff0c;它…...

编程新知 2026/5/21 20:49:39

AMD Ryzen终极调试工具：硬件级性能调优完全指南

AMD Ryzen终极调试工具&#xff1a;硬件级性能调优完全指南 【免费下载链接】SMUDebugTool A dedicated tool to help write/read various parameters of Ryzen-based systems, such as manual overclock, SMU, PCI, CPUID, MSR and Power Table. 项目地址: https://gitcode.…...

编程新知 2026/5/21 18:55:31

别再手动写RAM/ROM了！用Xilinx Block Memory Generator IP核的5个实战技巧（附Vivado仿真代码）

别再手动写RAM/ROM了&#xff01;用Xilinx Block Memory Generator IP核的5个实战技巧&#xff08;附Vivado仿真代码&#xff09; 在FPGA开发中&#xff0c;存储器模块的设计往往占据大量时间。许多工程师习惯手动编写RTL代码实现RAM/ROM功能&#xff0c;却忽略了Xilinx提供的B…...

编程新知 2026/5/21 17:58:32