使用jsp开发的网站,旅游网站模板下载,做播放器电影网站需要多少钱,甘肃兰州怎么样React 与 Three.js 的结合 #xff1a;通过 React 管理组件化结构和应用逻辑#xff0c;利用 Three.js 实现 3D 图形的渲染与交互。使用这种方法#xff0c;我们可以在保持代码清晰和结构化的同时#xff0c;实现令人惊叹的 3D 效果。
在本文中#xff0c;我们将以一个简…React 与 Three.js 的结合 通过 React 管理组件化结构和应用逻辑利用 Three.js 实现 3D 图形的渲染与交互。使用这种方法我们可以在保持代码清晰和结构化的同时实现令人惊叹的 3D 效果。
在本文中我们将以一个简单的示例为基础详细讲解如何在 React 项目中集成 Three.js并创建一个动态的 3D 场景。
本文介绍使用最原始的three如果想了解 react-three-fiber 可以参考这篇文章https://mp.weixin.qq.com/s/y0gsws7DqvbT_iZRasenkA?token1707814885langzh_CN
安装依赖并设置项目
使用 Vite 初始化项目并安装 Three.js
# 创建项目
npm create vite threejs-react-demo --template react# 进入项目目录
cd threejs-react-app# 安装 Three.js
npm install three项目目录结构
我们将创建以下目录结构
src/
├── components/ # 存放 React 组件
│ ├── ThreeScene.jsx # Three.js 场景组件
├── App.jsx # 入口文件
└── main.jsx # React 渲染入口创建 Three.js 场景
1. 创建 ThreeScene.jsx
import React, { useEffect, useRef } from react;
import * as THREE from three;const ThreeScene () {const containerRef useRef(null);useEffect(() {// 获取容器元素const container containerRef.current;// 创建场景const scene new THREE.Scene();// 创建相机const camera new THREE.PerspectiveCamera(75,container.clientWidth / container.clientHeight,0.1,1000);camera.position.z 5;// 创建渲染器const renderer new THREE.WebGLRenderer();renderer.setSize(container.clientWidth, container.clientHeight);container.appendChild(renderer.domElement);// 添加一个立方体const geometry new THREE.BoxGeometry();const material new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube new THREE.Mesh(geometry, material);scene.add(cube);// 动画函数const animate () {requestAnimationFrame(animate);// 旋转立方体cube.rotation.x 0.01;cube.rotation.y 0.01;renderer.render(scene, camera);};animate();// 窗口尺寸调整const handleResize () {camera.aspect container.clientWidth / container.clientHeight;camera.updateProjectionMatrix();renderer.setSize(container.clientWidth, container.clientHeight);};window.addEventListener(resize, handleResize);// 清理return () {window.removeEventListener(resize, handleResize);container.removeChild(renderer.domElement);};}, []);return div ref{containerRef} style{{ width: 100%, height: 100vh }} /;
};export default ThreeScene;2. 修改 App.jsx
将 ThreeScene 组件引入应用中。
import React from react;
import ThreeScene from ./components/ThreeScene;function App() {return (divh1 style{{ textAlign: center }}React Three.js 示例/h1ThreeScene //div);
}export default App;运行项目
运行以下命令启动开发服务器
npm run dev打开浏览器访问 http://localhost:5173你将看到一个旋转的绿色立方体。 在本文中我们将以一个简单的示例为基础详细讲解如何在 React 项目中集成 Three.js并创建一个动态的 3D 场景。无论你是刚接触 3D 开发还是已有一定经验相信都能从中有所收获。
