WEB 3D技术 简述React Hook/Class 组件中使用three.js方式

news2024/12/24 10:06:10

之前 已经讲过了 用vue结合three.js进行开发
那么 自然是少不了react

我们 还是先创建一个文件夹
在这里插入图片描述
终端执行

npm init vite@latest

输入一下项目名称 然后技术选择 react
在这里插入图片描述
也不太清楚大家的基础 那就选择最简单的js在这里插入图片描述
然后 我们就创建完成了
在这里插入图片描述
然后 我们用编辑器打开创建好的项目目录

然后 在终端执行

npm install three

引入threeJS 因为我们肯定要用的
在这里插入图片描述
然后 我们执行

npm install

重新整体引入一下项目依赖
在这里插入图片描述
如果node版本不合适 是会出现一点问题
可以用cnpm

然后安装好之后执行

npm run dev

在这里插入图片描述
然后浏览器访问
在这里插入图片描述
没有任何问题

然后 我们找到src下的 App.css
加上如下代码

*{
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 108vw;
  height: 108vh;
}

在这里插入图片描述
然后 将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(
        45, //视角 视角越大  能看到的范围就越大
        window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
        0.1,  //近平面  相机能看到最近的距离
        1000  //远平面  相机能看到最远的距离
    );

    //c创建一个canvas容器  并追加到 body上
    const renderer = new THREE.WebGLRenderer(0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //创建一个几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    //创建材质
    const material = new THREE.MeshBasicMaterial({ color:0x08ffe });
    //创建网格
    const cube = new THREE.Mesh(geometry, material);
    //将网格添加到场景中
    scene.add(cube);
    //设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
    camera.position.z = 5;
    //设置相机默认看向哪里   三个 0  代表 默认看向原点
    camera.lookAt(0, 0, 0);
    //将内容渲染到元素上
    renderer.render(scene, camera);
    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();
  },[])

  return (
    <div id = "app"></div>
  )
}

export default App

这是 Hook的一种写法 先 引入three
然后直接在useEffect这个声明周期中使用显然逻辑就OK了
在这里插入图片描述
如果是类组件直接这样

import { Component } from 'react'
import * as THREE from "three";
import './App.css'

class App extends Component{

  componentDidMount() {
    //创建场景
    const scene = new THREE.Scene();

    //创建相机
    const camera = new THREE.PerspectiveCamera(
        45, //视角 视角越大  能看到的范围就越大
        window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
        0.1,  //近平面  相机能看到最近的距离
        1000  //远平面  相机能看到最远的距离
    );

    //c创建一个canvas容器  并追加到 body上
    const renderer = new THREE.WebGLRenderer(0);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //创建一个几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    //创建材质
    const material = new THREE.MeshBasicMaterial({ color:0x08ffe });
    //创建网格
    const cube = new THREE.Mesh(geometry, material);
    //将网格添加到场景中
    scene.add(cube);
    //设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
    camera.position.z = 5;
    //设置相机默认看向哪里   三个 0  代表 默认看向原点
    camera.lookAt(0, 0, 0);
    //将内容渲染到元素上
    renderer.render(scene, camera);
    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();
  }

  render() {
    return <div id = "app"></div>
  }
}

export default App

因为 componentDidMount 可以拿到dom节点 我们用它挂载 其实都一样

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1308747.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数据结构与算法:冒泡排序

原理 从前到后&#xff0c;连续相连两个数对比&#xff0c;如果前一个数大于后一个数&#xff0c;则交换。 第一次&#xff1a; arr[0] 和 arr[1] 对比&#xff0c;若arr[0] 大于 arr[1]&#xff0c; 交换两个值。 arr[1] 和 arr[2]对比&#xff0c;若arr[1] 大于 arr[2]&…

【大话数据结构】- 读书笔记

2023-12-13 读书笔记 第一章 数据结构绪论 逻辑结构 集合结构线性结构树形结构图形结构 物理结构 顺序存储结构链式存储结构 可能在学习的时候会困惑、不懂、不理解、不会应用&#xff0c;甚至不知所云&#xff0c;可实际上无论学什么都是通过努力才可以学到真东西。只有…

Windows、Linux 和 macOS 操作系统:操作系统大比较

目录 引言 Windows Linux macOS 1. 用户界面 1.1 Windows 1.2 Linux 1.3 macOS 2. 开发者支持 2.1 Windows 2.2 Linux 2.3 macOS 3. 安全性和稳定性 3.1 Windows 3.2 Linux 3.3 macOS 结论 引言 在计算机科学领域&#xff0c;操作系统是计算机系统中的核心软件…

模块四(一):搭建自己的SSR

前言&#xff1a;同构渲染是将服务器渲染和客户端渲染相结合的一种渲染方式&#xff0c;在服务端生成初始页面&#xff0c;提升首屏加载速度&#xff0c;并且有利于SEO&#xff1b;在客户端接管HTML&#xff0c;并且将静态HTML激活为数据绑定的动态HTML&#xff0c;为用户提供更…

(五)STM32 NVIC 中断、优先级管理及 AFIO 时钟的开启

目录 1. 中断相关知识简介 1.1 什么是中断 1.2 什么是内中断、外中断 1.3 什么是可屏蔽中断、不可屏蔽中断 2. CM3 内核中断介绍 2.1 F103系统异常清单 2.2 F103 外部中断清单 3. NVIC 简介 3.1 NVIC 寄存器简介 3.2 NVIC 相关寄存器的介绍 4. 中断优先级 4.1 优先…

HarmonyOS 开发实例—蜜蜂 AI 助手

HarmonyOS 开发实例—蜜蜂 AI 助手 1. 前言 自华为宣布 HarmonyOS NEXT 全面启动&#xff0c;近期新浪、B 站、小红书、支付宝等各领域头部企业纷纷启动鸿蒙原生应用开发。据媒体统计&#xff0c;如今 Top20 的应用里&#xff0c;已经有近一半开始了鸿蒙原生应用开发。虽然目…

springCloud项目打包如何把jar发放到指定目录下

springCloud项目打包如何把jar发放到指定目录下 maven-antrun-plugin springCloud微服务打包jar&#xff0c;模块过多&#xff1b;我的项目模块结构如下&#xff1a; 我把实体类相关的单独抽离一个模块在service-api下服务单独写在service某块下&#xff0c; 每个模块的jar都…

SpringBoot+Vue3前后端快速整合入门

前言 最近需要维护一个个人项目&#xff0c;由于笔者是一个大后端&#xff0c;所以借此机会把前端学习过程记录一下&#xff0c;方便后续回顾。 前端项目初始化 安装npm 在前端项目初始化时&#xff0c;我们必须要安装好node&#xff0c;官网地址如下&#xff0c;因为笔者后…

Web前端 ---- 【Vue】Vue路由传参(query和params)

目录 前言 为什么用路由 路由route和路由器router Vue中路由的工作原理 安装配置vue-router 使用VueRouter 多级路由 路由传参 query传参 params传参 前言 本文介绍路由相关知识路由传参 为什么用路由 为了单页面应用开发&#xff0c;只更换组件&#xff0c;不频繁刷…

mysql数据库相关知识【MYSQL】

mysql数据库相关知识【MYSQL】 一. 库1.1 登录数据库管理系统1.2 什么是数据库1.2.1 mysqld与mysql 1.3 编码集和校验集1.3.1 什么是编码集和校验集1.3.2 查看库对应的编码集和校验集1.3.3 用指定的编码集和校验集 1.4 库的操作 一. 库 1.1 登录数据库管理系统 这个算是第一个…

vue中预览pdf的方法

使用vue-pdf 备注&#xff1a;这里只介绍了一页的pdf <div class"animation-box-pdf"><pdf :src"http://xxxx" /> </div>import Pdf from vue-pdf // src可以是文件地址url&#xff0c;也可以是文件流blob&#xff08;将blob转成url&a…

TCP/IP 四层体系结构

目录 ​编辑 导言&#xff1a; 应用层 1. HTTP&#xff08;超文本传输协议&#xff09; 2. FTP&#xff08;文件传输协议&#xff09; 3. SMTP&#xff08;简单邮件传输协议&#xff09; 4. POP3&#xff08;邮局协议第3版&#xff09; 5. IMAP&#xff08;互联网消息访…

bugku--源代码

查看源代码 发显URL编码 解码 在拼接这一串 拿着去提交就行啦

IDEA之设置主题风格为eclipse风格

设置IDEA的主题风格为eclipse风格&#xff0c;步骤如下: 1.选择File->Settings 2.选择 Plugins 3.搜索 eclipse theme&#xff0c;注意是红框里的&#xff0c;点击 install 下载后就会自动设置这个主题 4.你也可以去修改主题&#xff0c;选择 Appearance&#xff0c;设置th…

python编程需要的电脑配置,python编程用什么电脑

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;python编程对笔记本电脑配置的要求&#xff0c;python编程对电脑配置的要求有哪些&#xff0c;现在让我们一起来看看吧&#xff01; 学习python编程需要什么配置的电脑 简单的来讲&#xff0c;Python的话普通电脑就可以…

EasyRecovery2024苹果电脑mac破解版安装包下载

EasyRecovery是一款操作安全、价格便宜、用户自主操作的非破坏性的只读应用程序&#xff0c;它不会往源驱上写任何东西&#xff0c;也不会对源驱做任何改变。它支持从各种各样的存储介质恢复删除或者丢失的文件&#xff0c;其支持的媒体介质包括&#xff1a;硬盘驱动器、光驱、…

Web server failed to start. Port 8888 was already in use.

端口占用 强制终止占用端口的进程 获取占用端口的进程ID&#xff08;PID&#xff09;&#xff1a;在终端或命令提示符中运行以下命令以查找占用端口的进程ID&#xff1a; ①在 Unix/Linux/Mac 上&#xff1a;lsof -i :8888 ②在 Windows 上&#xff1a;netstat -ano | findstr …

【操作系统的IO模型有哪些?】

操作系统的IO模型有哪些&#xff1f; 操作系统中的IO模型逐一拓展同步阻塞IO模型同步非阻塞IO模型IO复用模型信号驱动IO模型异步IO模型 操作系统中的IO模型 为了保护操作系统的安全&#xff0c;通过缓存加快系统读写&#xff0c;会将内存分为用户空间和内存空间两个部分。如果…

C++STL的list模拟实现

文章目录 前言 list实现push_back迭代器(重点)普通迭代器const迭代器 inserterase析构函数构造函数拷贝构造赋值 vector和list的区别 前言 要实现STL的list, 首先我们还得看一下list的源码。 我们看到这么一个东西&#xff0c;我们知道C兼容C&#xff0c;可以用struct来创建一…

基于QTreeWidget实现多级组织结构

基于QTreeWidget实现多级组织结构以及带Checkbox的选择树 采用基于QWidgetMingw实现的多级组织结构树 通过QTreeWidget控件实现的多级组织结构树。 Qt相关系列文章&#xff1a; 一、Qt实现的聊天画面消息气泡 二、基于QTreeWidget实现多级组织结构 三、基于QTreeWidget实现带Ch…