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

embedded/2025/3/17 4:21:23/

文章目录

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.ppmy.cn/embedded/173241.html

相关文章

Javascript基础语法详解

面向对象的语言.脚本语言,不需要编译,浏览器解释即可运行 .用于控制网页的行为.浏览器的source可以打断点调试, console输入代码可以执行 use strict指令: 在“严格模式”下运行js代码, 防止意外创建全局变量等, 提高代码安全性和执行效率. 使用: 全局严格模式&#xff1a;…

Qt 信号与槽机制

1. 信号 和 槽 Qt 信号与槽机制 是一种用于对象间通信的低耦合设计模式&#xff0c;核心思想是&#xff1a;当某个信号触发&#xff0c;自动调用预先关联的处理函数&#xff08;槽函数&#xff09;。 在 Qt 中&#xff0c;如果一个类需要使用信号与槽机制&#xff0c;则该类必…

Redis 数据结构及使用场景介绍

Redis 是一种高性能的键值存储数据库&#xff0c;支持多种数据结构&#xff0c;每种数据结构都有其独特的特点和使用场景。以下是 Redis 的主要数据结构及其深入解析和实际使用场景介绍&#xff1a; 1.String&#xff08;字符串&#xff09; 特点 • 最基本的数据结构&#…

3.1 Spring Boot性能优化:从线程池调优到JVM参数配置

markdown # Spring Boot性能优化&#xff1a;从线程池调优到JVM参数配置![性能优化](https://img-blog.csdnimg.cn/direct/0a3e3d2e4d4b4f7f9c3d4a5b0e8d4e4c.png)## 引言 在微服务架构中&#xff0c;Spring Boot作为主流开发框架&#xff0c;其性能直接影响系统的吞吐量和响应…

ICLR2025 | SLMRec: 重新思考大语言模型在推荐系统中的价值

note 问题背景&#xff1a;序列推荐&#xff08;SR&#xff09;任务旨在预测用户可能的下一个交互项目。近年来&#xff0c;大型语言模型&#xff08;LLMs&#xff09;在SR系统中表现出色&#xff0c;但它们巨大的规模使得在实际平台中应用变得低效和不切实际。 研究动机&…

Linux 中的管道:进程间数据传输的利器

个人主页&#xff1a;chian-ocean 文章专栏-Linux 前言 **进程间通信&#xff08;Inter-Process Communication, IPC&#xff09;**是指在操作系统中&#xff0c;不同进程之间交换数据或信息的方式。由于每个进程都有自己的地址空间&#xff0c;直接访问另一个进程的数据是不…

Linux操作系统6- 线程2(线程的创建,终止,等待与退出)

上篇文章&#xff1a;Linux操作系统6- 线程1&#xff08;线程基础&#xff0c;调用接口&#xff0c;线程优缺点&#xff09;-CSDN博客 本篇Gitee仓库&#xff1a;myLerningCode/l28 橘子真甜/Linux操作系统与网络编程学习 - 码云 - 开源中国 (gitee.com) 进程&#xff1a;承担…

对最近的刷题做一个小总结(关于动态规划和贪心)

文章目录 1. 小总结2. 两道算法题2.1 数组中两个字符串的最小距离2.2 孩子们的游戏 1. 小总结 最近刷了很多算法题&#xff0c;真正了解到的算法应是dfs&#xff0c;多元dfs&#xff0c;以及动态规划和贪心。 dfs和多元dfs目前并没有真正深入研究过&#xff0c;不过熟悉套路之…