当前位置: 首页 > article >正文

【小沐学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.kler.cn/a/587494.html

相关文章:

  • 微信小程序wx.request接口报错(errno: 600001, errMsg: “request:fail -2:net::ERR_FAILED“)
  • 有效封装一个 WebSocket 供全局使用
  • Vue 中如何实现自定义指令?
  • 《DeepSeek 开源 DeepGEMM:开启AI计算新时代的密钥》:此文为AI自动生成
  • 变量赋值汇编
  • 【C】嵌入式的中断,理解
  • Modbus TCP到RTU:轻松转换指南!
  • docker mysql 默认配置文件路径
  • 架构思维:软件建模与架构设计的关键要点
  • mac安装navicat及使用
  • 聊聊langchain4j的AiServicesAutoConfig
  • vue里面使用什么组件和后端接口通讯
  • <meta content=“no-siteapp“ data-n-head=“ssr“ http-equiv=“Cache-Control“/>什么作用?
  • WPF CommunityToolkit.MVVM库的简单使用
  • 安全相关Python脚本
  • Qt介绍面试题一
  • Midjourney绘图参数详解:从基础到高级的全面指南
  • Java基礎2小時速成(上篇) - 掌握核心技术「卷」
  • 第十五届蓝桥杯C/C++B组拔河问题详解
  • Vision Transformer (ViT):将Transformer带入计算机视觉的革命性尝试(代码实现)