【小沐学Web3D】three.js 加载三维模型（Angular）

news2025/7/11 13:32:30

文章目录

  • 1、简介
    • 1.1 three.js
    • 1.2 angular.js
  • 2、three.js + Angular.js
  • 结语

1、简介

1.1 three.js

Three.js 是一款 webGL（3D绘图标准）引擎，可以运行于所有支持 webGL 的浏览器。Three.js 封装了 webGL 底层的 API ，为我们提供了高级的开发接口，可以使用简单的代码去实现 3D 渲染。
在这里插入图片描述

1.2 angular.js

https://angular.dev/
Angular 是一个用于构建移动和桌面 Web 应用的平台，拥有百万开发者的支持。
AngularJS 通过新的属性和表达式扩展了 HTML。
AngularJS 可以构建一个单一页面应用程序（SPAs：Single Page Applications）。
AngularJS 学习起来非常简单。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.net/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="">
 	<p>名字 : <input type="text" ng-model="name"></p>
 	<h1>Hello {{name}}</h1>
</div>
</body>
</html>

保存为index.html文件，用浏览器打开如下：
在这里插入图片描述

2、three.js + Angular.js

确保已经安装了 Angular CLI。如果没有安装，可以使用以下命令安装：

npm install -g @angular/cli

在这里插入图片描述
打印版本信息如下：
在这里插入图片描述

然后创建一个新的 Angular 项目：

ng new threejs-angular-app
cd threejs-angular-app

在这里插入图片描述
angular项目创建完毕：
在这里插入图片描述
生成的文件夹如下：
在这里插入图片描述
创建一个新的 Angular 组件来加载和渲染三维模型：
在这里插入图片描述
这会在 src/app 目录下生成一个新的组件文件夹 threejs-model。
生成文件夹如下：
在这里插入图片描述

npm install --save-dev @types/three

在这里插入图片描述

修改 threejs-model.component.ts：

import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

@Component({
  selector: 'app-threejs-model',
  template: '<div #threeContainer class="three-container"></div>',
  styles: [`
    .three-container {
      width: 100%;
      height: 100%;
    }
  `]
})
export class ThreejsModelComponent implements AfterViewInit {
  @ViewChild('threeContainer') threeContainer!: ElementRef;
  private scene!: THREE.Scene;
  private camera!: THREE.PerspectiveCamera;
  private renderer!: THREE.WebGLRenderer;
  private model!: THREE.Group;
  private controls!: OrbitControls; // 添加 OrbitControls
  
  ngAfterViewInit() {
    this.initThree();
    this.loadModel();
    this.animate();
  }

  initThree() {
    // 创建场景
    this.scene = new THREE.Scene();
    this.scene.background = new THREE.Color(0xaaaaaa);

    // 创建相机
    this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 1000);
    this.camera.position.set(0, 0.15, 0.15);
    this.camera.lookAt(this.scene.position);

    // 创建渲染器
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.renderer.setSize(window.innerWidth, window.innerHeight);
    this.threeContainer.nativeElement.appendChild(this.renderer.domElement);

	// 添加环境光
	const ambientLight = new THREE.AmbientLight(0xf0f0f0, 0.9);
	this.scene.add(ambientLight);

	// 初始化 OrbitControls
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.enableDamping = true; // 添加阻尼效果
    this.controls.dampingFactor = 0.05; // 阻尼系数

    // 处理窗口大小变化
    window.addEventListener('resize', () => {
      this.camera.aspect = window.innerWidth / window.innerHeight;
      this.camera.updateProjectionMatrix();
      this.renderer.setSize(window.innerWidth, window.innerHeight);
    });
  }

  loadModel() {
    // 初始化 GLTF 加载器
    const loader = new GLTFLoader();

    // 加载 GLTF 模型
    loader.load(
      './assets/models/Avocado2.glb', // 模型路径
      (gltf) => {
        this.model = gltf.scene;
        this.scene.add(this.model);
        console.log('模型加载成功', gltf);
      },
      (xhr) => {
        console.log(`模型加载进度：${(xhr.loaded / xhr.total) * 100}%`);
      },
      (error) => {
        console.error('模型加载失败', error);
      }
    );
  }

  animate() {
    requestAnimationFrame(() => this.animate());

    // 模型动画（例如旋转）
    if (this.model) {
      this.model.rotation.y += 0.01;
    }

    this.renderer.render(this.scene, this.camera);
  }
}

将你的 3D 模型文件（如 .glb 或 .gltf）放置在 public/assets/models 文件夹中。如果没有这个文件夹，可以手动创建：
public/assets/models/Avocado2.glb
在这里插入图片描述
在 app.routes.ts 中添加路由配置：

import { Routes } from '@angular/router';
import { ThreejsModelComponent } from './threejs-model/threejs-model.component';

export const appRoutes: Routes = [
  { path: '', component: ThreejsModelComponent },
];

在这里插入图片描述
修改 app.config.ts：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { appRoutes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(appRoutes)]
};

修改app.component.ts：

import { Component } from '@angular/core';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ThreejsModelComponent } from './threejs-model/threejs-model.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ThreejsModelComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'threejs-angular-app';
}

修改app.component.html：

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * Delete the template below * * * * * * * * * -->
<!-- * * * * * * * to get started with your project! * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->

<style>
  
</style>

<main class="main">
  <app-threejs-model></app-threejs-model>
</main>

<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * The content above * * * * * * * * * * * * -->
<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * * -->
<!-- * * * * * * * * * * and can be replaced.  * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
<!-- * * * * * * * * * * End of Placeholder  * * * * * * * * * * * * -->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->


<router-outlet />

修改tsconfig.json：

/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
	"typeRoots": ["node_modules/@types"]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

执行项目：

ng serve

在这里插入图片描述
浏览器运行如下：
在这里插入图片描述
在这里插入图片描述

结语

如果您觉得该方法或代码有一点点用处，可以给作者点个赞，或打赏杯咖啡；╮(￣▽￣)╭
如果您感觉方法或代码不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2331938.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

一种替代DOORS在WORD中进行需求管理的方法 （二）

一种替代DOORS在WORD中进行需求管理的方法 （二）

一、前景 参考&#xff1a; 一种替代DOORS在WORD中进行需求管理的方法&#xff08;基于WORD插件的应用&#xff09;_doors aspice-CSDN博客 二、界面和资源 WORD2013/WORD2016 插件 【已使用该工具通过第三方功能安全产品认证】&#xff1a; 1、 核心功能 1、需求编号和跟…
阅读更多...
一个基于ragflow的工业文档智能解析和问答系统

一个基于ragflow的工业文档智能解析和问答系统

工业复杂文档解析系统 一个基于ragflow的工业文档智能解析和问答系统，支持多种文档格式的解析、知识库管理和智能问答功能。 系统功能 1. 文档管理 支持多种格式文档上传（PDF、Word、Excel、PPT、图片等）文档自动解析和分块处理实时处理进度显示文档解析结果预览批量文档…
阅读更多...
23种设计模式-行为型模式-访问者

23种设计模式-行为型模式-访问者

文章目录 简介场景解决完整代码核心实现 总结 简介 访问者是一种行为设计模式&#xff0c;它能把算法跟他所作用的对象隔离开来。 场景 假如你的团队开发了一款能够使用图像里地理信息的应用程序。图像中的每个节点既能代表复杂实体&#xff08;例如一座城市&#xff09;&am…
阅读更多...
组播网络构建：IGMP、PIM 原理及应用实践

组播网络构建：IGMP、PIM 原理及应用实践

IP组播基础 组播基本架构 组播IP地址 一个组播IP地址并不是表示具体的某台主机&#xff0c;而是一组主机的集合&#xff0c;主机声明加入某组播组即标识自己需要接收目的地址为该组播地址的数据IP组播常见模型分为ASM模型和SSM模型ASM&#xff1a;成员接收任意源组播数据&…
阅读更多...
建筑兔零基础自学记录69|爬虫Requests-2

建筑兔零基础自学记录69|爬虫Requests-2

Requests库初步尝试 #导入requests库 import requests #requests.get读取百度网页 rrequests.get(http://www.baidu.com) #输出读取网页状态 print(r.status_code) #输出网页源代码 print(r.text) HTTP 状态码是三位数字&#xff0c;用于表示 HTTP 请求的结果。常见的状态码有…
阅读更多...
NVIDIA PhysX 和 Flow 现已完全开源

NVIDIA PhysX 和 Flow 现已完全开源

NVIDIA PhysX SDK 在 3-Clause BSD 许可下开源已有六年半了&#xff0c;但其中并非所有内容都是开源的。直到最近&#xff0c;随着 GPU 模拟内核源代码在 GitHub 上的发布&#xff0c;这种情况才有所改变。以下是 NVIDIA 分享的消息&#xff0c;以及 Flow SDK 着色器实现的发布…
阅读更多...
电脑DNS出错无法打开网页

电脑DNS出错无法打开网页

目录 解决步骤 打开“控制面板”--》“查看网络状态和任务” 打开“更改适配器设置” 对WLAN右键&#xff0c;打开属性 打开“使用下面的DNS服务器地址”--》高级 添加“114.114.114.114”&#xff0c;点击确定 今天晚上突然网页打不开了&#xff0c;一开始我以为是网络的…
阅读更多...
[Redis]redis-windows下载安装与使用

[Redis]redis-windows下载安装与使用

本篇记录windows redis下载安装与使用。 下载 官网下载方式(没windows版) https://redis.io/downloads/#stack 可以选择下载社区版Redis CE与增强版Redis Stack。 两者都不支持直接运行在windows上&#xff0c;需要Docker环境。 You can install Redis CE locally on your …
阅读更多...
极氪汽车云原生架构落地实践

极氪汽车云原生架构落地实践

云原生架构落地实践的背景 随着极氪数字业务的飞速发展&#xff0c;背后的 IT 技术也在不断更新迭代。极氪极为重视客户对服务的体验&#xff0c;并将系统稳定性、业务功能的迭代效率、问题的快速定位和解决视为构建核心竞争力的基石。 为快速响应用户的需求&#xff0c;例如…
阅读更多...
2025年AI开发学习路线

2025年AI开发学习路线

目录 一、基础阶段&#xff08;2-3个月&#xff09; 1. 数学与编程基础 2. 机器学习入门 二、核心技能&#xff08;3-4个月&#xff09; 1. 深度学习与框架 2. 大模型开发&#xff08;重点&#xff09; 三、进阶方向&#xff08;3-6个月&#xff09; 1. 多模态与智能体…
阅读更多...
oracle 动态性能视图

oracle 动态性能视图

Oracle 数据库中的 V$SQLAREA 是一个动态性能视图&#xff08;Dynamic Performance View&#xff09;&#xff0c;用于记录共享池&#xff08;Shared Pool&#xff09;中所有 SQL 语句的统计信息。每个 SQL 语句在共享池中存储为一个游标&#xff08;Cursor&#xff09;&#x…
阅读更多...
Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单

Vue3+Vite+TypeScript+Element Plus开发-10.多用户动态加载菜单

系列文档目录 Vue3ViteTypeScript安装 Element Plus安装与配置 主页设计与router配置 静态菜单设计 Pinia引入 Header响应式菜单缩展 Mockjs引用与Axios封装 登录设计 登录成功跳转主页 多用户动态加载菜单 Pinia持久化 动态路由-配置 文章目录 目录 系列文档目…
阅读更多...
前端用户列表与后端分页协同设计

前端用户列表与后端分页协同设计

分页实现方案 在现代Web应用中&#xff0c;用户列表展示与分页是一个常见的功能需求。前端与后端通过API协同工作&#xff0c;使用PageHelper等工具实现高效分页。 例如&#xff1a; 后端实现 (使用PageHelper) public PageResult DishPage(DishPageQueryDTO dishPageQuery…
阅读更多...
精准测试建设过程中遇到的一些问题

精准测试建设过程中遇到的一些问题

1.sqlite3 仅可以处理单个任务问题&#xff0c;多线程往往会面临数据库锁定 因为仅临时存储&#xff0c;后来在创建数据库时&#xff0c;给每个任务开了一个临时数据库&#xff0c;存储数据执行完毕后&#xff0c;删除db sql_insert_new:INSERT INTO analyze_api_resault_dynam…
阅读更多...
【Docker】Dockerfile 编写实践

【Docker】Dockerfile 编写实践

&#x1f47b;创作者&#xff1a;丶重明 &#x1f47b;创作时间&#xff1a;2025年4月8日 &#x1f47b;擅长领域&#xff1a;运维 目录 1. Dockerfile编写原则1.1.选择合适的基础镜像1.2.镜像层优化1.3.多阶段构建1.4.安全增强 2. 关键指令与技巧2.1.COPY vs ADD2.2.ENTRYPOIN…
阅读更多...
LabVIEW商业软件开发注意问题

LabVIEW商业软件开发注意问题

在 LabVIEW 商业软件开发进程中&#xff0c;性能优化、界面设计及兼容性与扩展性&#xff0c;对软件品质、用户体验和市场适配性起着决定性作用。下面&#xff0c;借助多个LabVIEW 编程特性的实际案例&#xff0c;深入分析这些方面的开发要点。 一、性能优化&#xff1a;提升软…
阅读更多...
Java 中 SQL 注入问题剖析​

Java 中 SQL 注入问题剖析​

一、引言​ 在当今数字化时代&#xff0c;数据是企业和组织的核心资产之一。许多应用程序都依赖于数据库来存储和管理数据&#xff0c;而 Java 作为一种广泛使用的编程语言&#xff0c;常被用于开发与数据库交互的应用程序。然而&#xff0c;SQL 注入这一安全漏洞却如同隐藏在…
阅读更多...
深度学习项目--分组卷积与ResNext网络实验探究(pytorch复现)

深度学习项目--分组卷积与ResNext网络实验探究(pytorch复现)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 ResNext是分组卷积的开始之作&#xff0c;这里本文将学习ResNext网络&#xff1b;本文复现了ResNext50神经网络&#xff0c;并用其进行了猴痘病分类实验…
阅读更多...
CSS 笔记——Flexbox（弹性盒布局）

CSS 笔记——Flexbox（弹性盒布局）

目录 1. Flex 容器与 Flex 项目 2. 主轴与交叉轴 3. Flex 容器的属性 display flex-direction justify-content align-items align-content flex-wrap 4. Flex 项目的属性 flex-grow flex-shrink flex-basis flex align-self 5. Flexbox 的优点 6. Flexbox 的…
阅读更多...
cpp（c++）win 10编译GDAL、PROJ、SQLite3、curl、libtiff

cpp（c++）win 10编译GDAL、PROJ、SQLite3、curl、libtiff

cpp&#xff08;c&#xff09;编译GDAL、PROJ、SQLite3 Sqlite3libtiffcurlprojGDAL Sqlite3 1、下载 Sqlite3 源码、工具、二进制预编译 exe Sqlite3 官网&#xff1a;https://www.sqlite.org/download.html 下载 sqlite-amalgamation-3430200.zipsqlite-dll-win64-x64-3430…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023