文章目录
- 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 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
- 声明式设计 −React采用声明范式，可以轻松描述应用。
- 高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
- 灵活 −React可以与已知的库或框架很好地配合。
- JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
- 组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
- 单向响应的数据流 − 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???
如果您需要相关功能的代码定制化开发，可以留言私信作者；(✿◡‿◡)
感谢各位大佬童鞋们的支持！( ´ ▽´ )ﾉ ( ´ ▽´)っ！！！
