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

Three.js 系列专题 5：加载外部模型

article 2026/2/2 22:55:18
内容概述

Three.js 支持加载多种 3D 文件格式（如 GLTF、OBJ、FBX），这让开发者可以直接使用专业建模软件（如 Blender、Maya）创建的复杂模型。本专题将重点介绍 GLTF 格式的加载，并调整模型的位置和材质。

学习目标
  • 理解常见 3D 文件格式及其特点。
  • 掌握使用 GLTFLoader 加载外部模型。
  • 学会调整加载模型的属性（如位置、大小、材质）。
完整代码实现

我们将加载一个 GLTF 格式的狐狸模型（来自 Three.js 官方示例），并让它在场景中旋转。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Three.js - 加载外部模型</title><style>body { margin: 0; overflow: hidden; }canvas { display: block; }</style>
</head>
<body><!-- 引入 Three.js 和 GLTFLoader --><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script><script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script><script>// 1. 初始化场景、相机和渲染器const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 2, 5);camera.lookAt(0, 0, 0);const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 2. 添加光源const ambientLight = new THREE.AmbientLight

相关文章：

Three.js 系列专题 5：加载外部模型

内容概述 Three.js 支持加载多种 3D 文件格式（如 GLTF、OBJ、FBX），这让开发者可以直接使用专业建模软件（如 Blender、Maya）创建的复杂模型。本专题将重点介绍 GLTF 格式的加载，并调整模型的位置和材质。 学习目标 理解常见 3D 文件格式及其特点。掌握使用 GLTFLoader 加…...

编程日记 2025/11/2 12:46:45

【EC200N-CN——Linux驱动移植】问题回顾

【EC200N-CN——Linux驱动移植】问题回顾 1&#xff09;、开发回顾一、问题回顾与解决过程二、核心原理分析1. **USB设备识别的关键&#xff1a;VID/PID**2. **为什么之前不生成ttyUSB节点&#xff1f;**3. **为什么添加PID后就能生成节点&#xff1f;** 三、日志关键信息解读1…...

编程日记 2026/1/30 9:06:12

linux安装ollama

俩种方式都可 一、linux通过docker安装ollama镜像 1.下载安装ollama镜像 # 安装 Docker sudo yum install docker sudo systemctl start docker#docker查看所有容器 docker ps -a # 查看所有容器# docker查看指定容器 docker ps -a |grep ollama# 创建模型存储目录&#xff…...

编程日记 2025/11/16 10:23:48

构建k8s下Helm私有仓库与自定义Chart开发指南

#作者&#xff1a;程宏斌 文章目录 自定义helm模板1、开发自己的chare包2、调试chart3、安装chart 自定义helm模板 https://hub.helm.sh/ 1、开发自己的chare包 [rootmaster ~]# helm create mychare //创建一个名为mychare的chare包 [rootmaster ~]# tree -C mychare/ //以…...

编程日记 2026/1/23 2:42:47

【7】C#上位机---Modbus RTU 界面设计与封装

C#上位机---Modbus通讯 1 Modbus RTU 通讯1.1 RS485串口与串行通信（Serial Communications）1.2 Modbus RTU协议1.3 Modbus RTU主从模式1.4 Modbus 主从站模拟调试2 Modbus RTU 界面设计与封装2.1 温度控件的类属性2.2 C#封装Modbus实现通讯2.3 C#封装Modbus TRU通用类2.4 上位…...

编程日记 2026/1/23 2:55:37

【JVM】question

问题 JVM线程是用户态还是内核态 java线程在jdk1.2之前&#xff0c;是基于名为“绿色线程”的用户线程实现的&#xff0c;这导致绿色线程只能同主线程共享CPU分片&#xff0c;从而无法利用多核CPU的优势。 由于绿色线程和原生线程比起来在使用时有一些限制&#xff0c; jdk1.2…...

编程日记 2025/9/16 20:34:09

Node.js 中处理 Excel 文件的最佳实践

在现代应用开发中&#xff0c;Excel 文件仍然是数据交换和存储的重要格式之一。在 Node.js 环境中&#xff0c;处理 Excel 文件的需求日益增加。本文将介绍如何在 Node.js 中高效地处理 Excel 文件&#xff0c;涵盖工具选择、基本操作和最佳实践。 1. 选择合适的库 在 Node.js…...

编程日记 2025/8/25 19:23:57

【嵌入式学习6】多任务版TCP服务器

目录 如何实现&#xff1a; 客户端1.0版本&#xff1a; 服务端&#xff1a; 客户端2.0版本&#xff1a; thread.join() 是一个线程同步方法&#xff0c;用于主线程等待子线程完成。当你调用 thread.join() 时&#xff0c;主线程会阻塞&#xff0c;直到调用 join() 的子线程…...

编程日记 2026/1/23 1:43:11

每天认识一个设计模式-外观模式：化繁为简的接口魔法

一、前言 在设计模式中&#xff0c;结构型设计模式处理类或对象组合&#xff0c;可助力构建灵活、可维护软件结构。此前探讨过组合模式&#xff08;将对象组合成树形结构&#xff0c;统一处理单个与组合对象&#xff0c;如文件系统管理&#xff09;和装饰器模式&#xff08;动…...

编程日记 2026/1/23 12:28:45

VLAN(虚拟局域网)

一、vlan概述 VLAN(virtual local area network)是一种通过逻辑方式划分网络的技术&#xff0c;允许将一个物理网络划分为多个独立的虚拟网络。每一个vlan是一个广播域&#xff0c;不同vlan之间的通信需要通过路由器或三层交换机 [!注意] vlan是交换机独有的技术&#xff0c;P…...

编程日记 2026/1/31 4:26:11

Transformers without Normalization论文翻译

论文信息&#xff1a; 作者&#xff1a;Jiachen Zhu, Xinlei Chen, Kaiming He, Yann LeCun, Zhuang Liu 论文地址&#xff1a;arxiv.org/pdf/2503.10622 代码仓库&#xff1a;jiachenzhu/DyT: Code release for DynamicTanh (DyT) 摘要 归一化层在现代神经网络中无处不在…...

编程日记 2026/1/23 11:42:12

题目练习之set的奇妙使用

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨ 个…...

编程日记 2026/1/23 12:35:54

负载均衡是什么，Kubernetes如何自动实现负载均衡

负载均衡是什么&#xff1f; 负载均衡&#xff08;Load Balancing&#xff09; 是一种网络技术&#xff0c;用于将网络流量&#xff08;如 HTTP 请求、TCP 连接等&#xff09;分发到多个服务器或服务实例上&#xff0c;以避免单个服务器过载&#xff0c;提高系统的可用性、可扩…...

编程日记 2025/11/14 22:46:12

网站提示“不安全“怎么办？原因分析与解决方法

引言&#xff1a;为什么浏览器会提示网站"不安全"&#xff1f; 当您访问某些网站时&#xff0c;浏览器可能会显示"不安全"警告。这通常意味着该网站存在安全风险&#xff0c;可能影响您的隐私或数据安全。本文将介绍常见原因及解决方法&#xff0c;帮助您…...

编程日记 2026/1/23 12:07:52

如何利用AI智能生成PPT，提升工作效率与创意表现

如何利用AI智能生成PPT&#xff0c;提升工作效率与创意表现&#xff01;在这个信息爆炸的时代&#xff0c;制作一份既专业又富有创意的PPT&#xff0c;已经不再是一个简单的任务。尤其是对于每天都需要做报告、做展示的职场人士来说&#xff0c;PPT的质量直接影响着工作效率和个…...

编程日记 2026/1/20 17:03:41

【11】Redis快速安装与Golang实战指南

文章目录 1 Redis 基础与安装部署1.1 Redis 核心特性解析1.2 Docker Compose 快速部署1.3 Redis 本地快速部署 2 Golang 与 Redis 集成实战2.1 环境准备与依赖安装2.2 核心操作与数据结构实践2.2.1 基础键值操作2.2.2 哈希结构存储用户信息 3 生产级应用场景实战3.1 分布式锁实…...

编程日记 2025/8/24 3:51:43

【数据结构】图论存储革新：十字链表双链设计高效解决有向图入度查询难题

十字链表 导读一、邻接表的优缺点二、十字链表2.1 结点结构2.2 原理解释2.2.1 顶点表2.2.2 边结点2.2.3 十字链表 三、存储结构四、算法评价4.1 时间复杂度4.2 空间复杂度 五、优势与劣势5.1 优势5.2 劣势5.3 特点 结语 导读 大家好&#xff0c;很高兴又和大家见面啦&#xff…...

编程日记 2026/1/24 9:25:23

聊一聊没有接口文档时如何开展测试

目录 一、前期准备与信息收集 二、使用抓包工具分析接口 三、逆向工程构造测试用例 四、安全测试 五、 模糊测试&#xff08;Fuzz Testing&#xff09; 六、记录并维护发现的接口信息 七、 推动团队规范流程 其它注意事项 在我们进行接口测试时&#xff0c;总会遇到各种…...

编程日记 2025/7/14 5:44:47

.net6 中实现邮件发送

一、开启邮箱服务 先要开启邮箱的 SMTP 服务&#xff0c;获取授权码&#xff0c;在实现代码发送邮件中充当邮箱密码用。 在邮箱的 设置 > 账号 > POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务中&#xff0c;把 SMTP 服务开启&#xff0c;获取授权码。 二、安装库 安装 …...

编程日记 2026/1/24 7:45:35

vector复制耗时

CPP中的vector对象在传参给子函数时&#xff0c;如果直接传参&#xff0c;会造成复制给形参的额外耗时 如何解决这个问题呢&#xff1f; 这样定义局部函数 const vector <int>&vec可以保证传递vector对象时使用地址传递&#xff0c;并且使用const保证vector不被改变…...

编程日记 2025/11/30 8:04:20

MySQL 数据库操作指南：从数据库创建到数据操作

关键词&#xff1a;MySQL&#xff1b;数据库操作&#xff1b;DDL&#xff1b;DML 一、引言 MySQL 作为广泛应用的关系型数据库管理系统&#xff0c;对于开发人员和数据库管理员而言&#xff0c;熟练掌握其操作至关重要。本文章通过一系列 SQL 示例&#xff0c;详细阐述 MySQL…...

编程日记 2025/6/5 7:16:25

【Linux】命令和权限

目录&#xff1a; 一、shell命令及运行原理 &#xff08;一&#xff09;什么是外壳 &#xff08;二&#xff09;为什么要有外壳 &#xff08;三&#xff09;外壳怎么工作的 二、Linux权限的概念 &#xff08;一&#xff09;Linux的文件类型 &#xff08;二&#xff09;L…...

编程日记 2026/1/24 14:13:43

22.OpenCV轮廓匹配原理介绍与使用

OpenCV轮廓匹配原理介绍与使用 1. 轮廓匹配的基本概念 轮廓匹配&#xff08;Contour Matching&#xff09;是计算机视觉中的一种重要方法&#xff0c;主要用于比较两个轮廓的相似性。它广泛应用于目标识别、形状分析、手势识别等领域。 在 OpenCV 中&#xff0c;轮廓匹配主要…...

编程日记 2026/1/24 14:13:39

深入解析AI绘画技术背后的人工智能

在当今数字艺术领域&#xff0c;AI绘画作为一种新兴艺术形式&#xff0c;正迅速吸引着越来越多的创作者与爱好者。它不仅推动了艺术创作的边界&#xff0c;同时也改变了我们对创作与美的理解。本文将深入探讨AI绘画所依赖的人工智能技术&#xff0c;并分析其背后的原理与应用。…...

编程日记 2026/1/25 14:04:25

Kaggle房价预测

实战 Kaggle 比赛&#xff1a;预测房价 这里李沐老师讲的比较的细致&#xff0c;我根据提供的代码汇总了一下&#xff1a; import hashlib import os import tarfile import zipfile import requests import numpy as np import pandas as pd import torch from matplotlib i…...

编程日记 2025/10/22 16:07:52

browser-use开源程序使 AI 代理可以访问网站，自动完成特定的指定任务，告诉您的计算机该做什么，它就会完成它。

一、软件介绍 文末提供程序和源码下载 browser-use开源程序使 AI 代理可以访问网站&#xff0c;自动完成特定的指定任务&#xff0c;浏览器使用是将AI代理与浏览器连接的最简单方法。告诉您的计算机该做什么&#xff0c;它就会完成它。 二、快速开始 使用 pip &#xff08;Py…...

编程日记 2026/1/24 9:26:02

java虚拟机---JVM

JVM JVM&#xff0c;也就是 Java 虚拟机&#xff0c;它最主要的作用就是对编译后的 Java 字节码文件逐行解释&#xff0c;翻译成机器码指令&#xff0c;并交给对应的操作系统去执行。 JVM 的其他特性有&#xff1a; JVM 可以自动管理内存&#xff0c;通过垃圾回收器回收不再…...

编程日记 2026/1/24 14:38:41

2025数字中国初赛wp

一&#xff0c;取证与溯源 镜像文件解压密码&#xff1a;44216bed0e6960fa 1.运维人员误删除了一个重要的word文件&#xff0c;请通过数据恢复手段恢复该文件&#xff0c;文件内容即为答案。 先用R-stuido软件进行数据恢复 得到 打开重要文件.docx全选发现有一条空白的被选中…...

编程日记 2026/1/24 4:14:48

c#和c++脚本解释器科学运算

说明&#xff1a; 我希望用c#和c写一个脚本解释器&#xff0c;用于科学运算 效果图&#xff1a; step1: c# C:\Users\wangrusheng\RiderProjects\WinFormsApp3\WinFormsApp3\Form1.cs using System; using System.Collections.Generic; using System.Data; using System.Tex…...

编程日记 2026/1/24 5:24:45

青蛙吃虫--dp

1.dp数组有关元素--路长和次数 2.递推公式 3.遍历顺序--最终影响的是路长&#xff0c;在外面 其次次数遍历&#xff0c;即这次路长所有情况都更新 最后&#xff0c;遍历次数自然就要遍历跳长 4.max时时更新 dp版本 #include<bits/stdc.h> using namespace std; #def…...

编程日记 2026/1/24 7:43:18