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

devtools/2025/3/17 5:01:41/

文章目录

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/devtools/167737.html

相关文章

在 Linux 64 位系统上安装 Oracle 11g R2 数据库的完整指南

linux.x64_11gR2_database 是 Oracle 数据库 11g 第 2 版&#xff08;11g Release 2&#xff09;的安装包&#xff0c;适用于 64 位 Linux 操作系统。这个安装包包含了在 64 位 Linux 系统上安装 Oracle 数据库所需的全部文件和组件。 安装步骤概述 以下是在 Linux 系统上安装…

(七)Spring Boot学习——Redis使用

有部分内容是常用的&#xff0c;为了避免每次都查询数据库&#xff0c;将部分数据存入Redis。 一、 下载并安装 Redis Windows 版的 Redis 官方已不再维护&#xff0c;你可以使用 微软提供的 Redis for Windows 版本 或者 使用 WSL&#xff08;Windows Subsystem for Linux&a…

C++——STL 常用的排序算法

算法简介&#xff1a; sort // 对容器内元素进行排序reandom_shuffle // 洗牌 指定范围内的元素随机调整次序merge // 容器元素合并&#xff0c;并存储到另一个容器中reverse // 反转指定范围的元素 1. sort 功能描述&#xff1a; 对容器内元素进行排序 函…

卸载Linux自带的MariaDB操作过程

安装及配置 1、下载安装包mysql-version-linux-glibc2.5-x86_64.tar&#xff08;可前往官网自行下载&#xff1a;http://dev.mysql.com/downloads/mysql/&#xff09; 2、卸载系统自带的MariaDB 打开Terminal终端&#xff1a; # rpm -qa|grep mariadb //查询出来已安装的ma…

PyTorch 深度学习实战(14):Deep Deterministic Policy Gradient (DDPG) 算法

在上一篇文章中&#xff0c;我们介绍了 Proximal Policy Optimization (PPO) 算法&#xff0c;并使用它解决了 CartPole 问题。本文将深入探讨 Deep Deterministic Policy Gradient (DDPG) 算法&#xff0c;这是一种用于连续动作空间的强化学习算法。我们将使用 PyTorch 实现 D…

条件运算符

在 MySQL 中&#xff0c;BETWEEN...AND 语句是一个用于筛选数据的条件运算符&#xff0c;它可以帮助你从表中选取指定范围内的数据。 SELECT column1, column2, ... FROM table_name WHERE column_name BETWEEN value1 AND value2; 如果你想选取不在指定范围内的数据&#xff0…

将景区天气数据存储到Excel文件中

笔记 import weather import openpyxl htmlweather.get_html() # 发请求&#xff0c;得响应结果 lstweather.parse_html(html) # 解析数据 # 创建一个新的Excel工作簿 workbookopenpyxl.Workbook() # 创建对象 # 在Excel文件中创建工作表 sheetworkbook.create_sheet(景区天气…

DeepSeek-prompt指令-当DeepSeek答非所问,应该如何准确的表达我们的诉求?

当DeepSeek答非所问&#xff0c;应该如何准确的表达我们的诉求&#xff1f;不同使用场景如何向DeepSeek发问&#xff1f;是否有指令公式&#xff1f; 目录 1、 扮演专家型指令2、 知识蒸馏型指令3、 颗粒度调节型指令4、 时间轴推演型指令5、 极端测试型6、 逆向思维型指令7、…