【小沐学Web3D】three.js 加载三维模型(React)

文章目录

  • 1、简介
    • 1.1 three.js
    • 1.2 react.js
  • 2、three.js + React
  • 结语

1、简介

1.1 three.js

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

1.2 react.js

React 使用称为 JSX(JavaScript 和 XML)的 HTML-in-JavaScript 语法。
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React 主要用于构建 UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

在这里插入图片描述

  1. 声明式设计 −React采用声明范式,可以轻松描述应用。
  2. 高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
  3. 灵活 −React可以与已知的库或框架很好地配合。
  4. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
  5. 组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
  6. 单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

2、three.js + React

使用Vite创建一个React项目:

npm create vite@latest my-vite-app

在这里插入图片描述
选择React模板.
在这里插入图片描述
选择JavaScript.
在这里插入图片描述

cd my-vite-app
npm install

在这里插入图片描述
在这里插入图片描述

npm run dev

在这里插入图片描述
在这里插入图片描述
安装Three.js库:

npm install three

在这里插入图片描述
将src/App.jsx文件修改为以下内容:

import { useEffect } from "react";
import * as THREE from "three";
import "./App.css";function App() {useEffect(() => {// 创建场景const scene = new THREE.Scene();// 创建相机const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000);camera.position.z = 2;// 创建渲染器const renderer = new THREE.WebGLRenderer();renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);// 创建立方体const geometry = new THREE.BoxGeometry();const material = new THREE.MeshStandardMaterial({ color: 0x00ffff });const cube = new THREE.Mesh(geometry, material);scene.add(cube);// 添加灯光// 环境光const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);scene.add(ambientLight);// 方向光const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);directionalLight.position.set(5, 5, 5);scene.add(directionalLight);// 动画函数const animate = () => {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);};animate();// 处理窗口大小调整const onWindowResize = () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);};window.addEventListener("resize", onWindowResize);// 清理return () => {window.removeEventListener("resize", onWindowResize);document.body.removeChild(renderer.domElement);};}, []);return <div className="App"></div>;
}export default App;

将src/App.css文件修改为以下内容:

*,
body,
html {padding: 0;margin: 0;box-sizing: border-box;
}canvas {display: block;position: fixed;left: 0;top: 0;width: 100vw;height: 100vh;
}

运行以下命令启动开发服务器:

npm run dev

在这里插入图片描述

结语

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简述计算机网络中的七层模型和四层模型

在计算机网络中&#xff0c;网络协议栈的设计通常采用分层结构来处理不同的通信任务。常见的分层结构有OSI七层模型和TCP/IP四层模型。虽然它们的层次数量不同&#xff0c;但本质上都在解决如何有效地进行计算机间通信。本文将分别介绍这两种结构的功能和各层的协议。 一、OSI七…

在 CentOS 上安装 Oracle 数据库

文章目录 **1. 系统准备****1.1 检查系统要求****1.2 更新系统****1.3 安装必要的依赖包****1.4 创建 Oracle 用户和组****1.5 配置内核参数****1.6 配置用户限制****1.7 配置 PAM 模块****1.8 创建 Oracle 安装目录** **2. 下载 Oracle 数据库安装包****2.1 访问 Oracle 官方网…

掌握这些 UI 交互设计原则,提升产品易用性

在当今数字化时代&#xff0c;用户对于产品的体验要求越来越高&#xff0c;UI 交互设计成为决定产品成败的关键因素之一。一个易用的产品能够让用户轻松、高效地完成各种操作&#xff0c;而实现这一目标的核心在于遵循一系列科学合理的 UI 交互设计原则。本文将详细阐述简洁性、…

创新实践分享:基于边缘智能+扣子的智能取物机器人解决方案

在 2024 年全国大学生物联网设计竞赛中&#xff0c;火山引擎作为支持企业&#xff0c;不仅参与了赛道的命题设计&#xff0c;还为参赛队伍提供了相关的硬件和软件支持。以边缘智能和扣子的联合应用为核心&#xff0c;参赛者们在这场竞赛中展现出了卓越的创新性和实用性&#xf…

Python----数据可视化(Pyecharts一:介绍安装,全局配置,系列配置)

一、PyEcharts介绍 1.1、概况 Echarts 是一个由百度开源的数据可视化&#xff0c;凭借着良好的交互性&#xff0c;精巧的图表设计&#xff0c;得到了众多开发者的认可。而 Python 是一门富有表达力的语言&#xff0c;很适合用于数据处理。当数据分析遇上数据可视化时&#xff…

Cursor初体验:excel转成CANoe的vsysvar文件

今天公司大佬先锋们给培训了cursor的使用&#xff0c;还给注册了官方账号&#xff01;跃跃欲试&#xff0c;但是测试任务好重&#xff0c;结合第三方工具开发也是没有头绪。 但巧的是&#xff0c;刚好下午有同事有个需求&#xff0c;想要把一个几千行的excel转成canoe的系统变…

【3DGS】SuperSplat本地运行+修改监听端口+导入ply模型+修剪模型+在线渲染3DGS网站推荐

SuperSplat官网代码&#xff1a;https://github.com/playcanvas/supersplat 本地安装和运行 Clone the repository: git clone https://github.com/playcanvas/supersplat.git cd supersplat Install dependencies: npm install Build SuperSplat and start a local web ser…

MySQL中的B+树索引经验总结

一、什么是B树 B树是一种二叉树&#xff0c;由二叉查找树&#xff0c;平衡二叉树&#xff0c;B树演化而来。 请看上图 B树的特点&#xff1a; 1&#xff09;非叶子节点不存放数据&#xff0c;只存放键值&#xff0c;数据都存放在叶子节点中。 2&#xff09;叶子节点都在同一…

C# NX二次开发:在多个体的模型中如何实现拉伸操作布尔减

大家好&#xff0c;今天接着上一篇拉伸文章去讲。 UF_MODL_create_extruded1 (view source) uf_list_p_tobjectsInputList of objects to be extruded.char *taper_angleInputTaper angle (in degrees).char *limit [ 2 ]InputLimit of extrusion. This is declared as: char …

【深度学习】多源物料融合算法(一):量纲对齐常见方法

目录 一、引言 二、量纲对齐常见方法 2.1 Z-score标准化Sigmoid归一化 2.2 Min-Max 归一化 2.3 Rank Transformation 2.4 Log Transformation 2.5 Robust Scaling 3、总结 一、引言 类似抖音、快手、小红书等产品的信息流推荐业务&#xff0c;主要通过信息流广告、信…

前端高级CSS用法

前端高级CSS用法 在前端开发中&#xff0c;CSS&#xff08;层叠样式表&#xff09;不仅是用来控制网页的外观和布局&#xff0c;更是实现复杂交互和动态效果的关键技术之一。随着前端技术的不断发展&#xff0c;CSS的用法也日益丰富和高级。本文将深入探讨前端高级CSS的用法&a…

How to install a package in offline scenario in Ubuntu 24.04

概述 做过信创项目的兄弟们在工作上每天可能面对很多需要解决的问题&#xff0c;不过&#xff0c;有一类问题可能是大家经常遇的&#xff0c;比方说&#xff0c;有时候我们不得不硬着头皮在离线生产环境中安装某些软件包&#xff0c;相信很多兄弟被这种细碎的小事搞得焦头烂额…

C++类与对象——拷贝构造与运算符重载

拷贝构造函数和赋值运算符重载就是C类默认六个函数之二。 拷贝构造函数&#xff1a; 如果⼀个构造函数的第⼀个参数是自身类类型的引用&#xff0c;且任何额外的参数都有默认值&#xff0c;则此构造函数 也叫做拷贝构造函数&#xff0c;也就是说拷贝构造是⼀个特殊的构造函数…

数学建模 第一节

目录​​​​​​ 前言 一 优化模型的类型 二 线性规划1 线性规划2 三 0-1规划 总结 前言 数学建模主要是将问题转化为模型&#xff0c;然后再以编程的形式输出出来 算法都知道&#xff0c;数学建模也需要用到算法&#xff0c;但是不是主要以编程形式展示&#xff0c;而是…

计算机网络——DNS

一、什么是DNS&#xff1f; DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09; 是互联网的核心服务&#xff0c;负责将人类可读的域名&#xff08;如 www.baidu.com&#xff09;转换为机器可识别的 IP地址&#xff08;如 14.119.104.254&#xff09;。它像一…

【软考-架构】5.2、传输介质-通信方式-IP地址-子网划分

✨资料&文章更新✨ GitHub地址&#xff1a;https://github.com/tyronczt/system_architect 文章目录 传输介质网线光纤无线信道 通信方式和交换方式会考&#xff1a;交换方式 &#x1f4af;考试真题第一题第二题 IP地址表示子网划分&#x1f4af;考试真题第一题第二题 传输…

基于SpringBoot+Vue的毕业论文管理系统+LW示例参考

1.项目介绍 系统角色&#xff1a;管理员、指导教师、评阅教师、学生功能模块&#xff1a;用户管理、毕业论文管理、课题信息管理、选题申请管理、课题任务管理、基础数据管理、公告信息管理、评阅教师管理、指导教师管理等技术选型&#xff1a;SpringBoot&#xff0c;Vue等测试…

文件系统 linux ─── 第19课

前面博客讲解的是内存级文件管理,接下来介绍磁盘级文件管理 文件系统分为两部分 内存级文件系统 : OS加载进程 ,进程打开文件, OS为文件创建struct file 和文件描述符表 ,将进程与打开的文件相连, struct file 内还函数有指针表, 屏蔽了底层操作的差异,struct file中还有内核级…

第十次CCF-CSP认证(含C++源码)

第十次CCF-CSP认证 分蛋糕满分题解 学生排队满分题解 Markdown语法题目解读满分代码 结语 分蛋糕 题目链接 满分题解 基本思路&#xff1a;我们需要保证除了最后一个小朋友之外的所有人&#xff0c;分得的蛋糕都大于等于给定的K值&#xff0c;为什么是大于等于&#xff0c;是…

MyBatis框架操作数据库一>xml和动态Sql

目录 配置连接字符串和MyBatis:数据库的连接配置&#xff1a;XML的配置&#xff1a; XML编写Sql:model层&#xff1a;mapper层&#xff1a; 动态Sql:if 标签和trim标签&#xff1a;where标签:Set标签:Foreach标签: Mybatis的开发有两种方式&#xff1a;&#xff1a; 注解和XML&…