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

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

news 2025/12/23 2:03:24

参考资料

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

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2025/12/22 10:49:57

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2025/12/22 14:52:54

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

编程新知 2025/9/14 7:59:52

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/12/15 20:41:51

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/12/11 5:02:54

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/12/16 23:25:05

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/10/15 12:45:18

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/10/13 4:15:41

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

编程新知 2025/12/15 13:11:03