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

之前 已经讲过了 用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.mzph.cn/news/227763.shtml

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

相关文章

Angular中使用Intersection Observer API实现无限滚动

背景&#xff1a; 实现原理为 在data下面加一个loading元素 如果此元素进入视窗 则调用api获取新的数据加到原来的数据里面&#xff0c;这时loading就会被新数据顶下去&#xff0c;如此循环。 <div id"dataContainer"></div> <div id"loadingCo…

Java之方法引用

目录 一、什么是方法引用 二、方法引用的规则 三、方法引用的分类&#xff1a; &#xff08;一&#xff09;、引用静态方法 &#xff08;二&#xff09;、引用成员方法 1、引用其他类的成员方法 2、引用本类的成员方法 3、引用父类的成员方法 &#xff08;三&#xff…

Win7系统桌面出现白色透明框的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

Vue3源码梳理:设计一个微型Vue的源码框架环境

目录结构设计 创建 vue-mini 目录在该目录中&#xff0c;初始化npm包&#xff1a;$ npm init -y创建package.json文件创建packages 目录&#xff0c;作为核心代码区域 在内创建vue目录&#xff1a;打包&#xff0c;测试实例&#xff0c;项目整体入口模块在内创建 shared 目录&…

高云GW1NSR-4C开发板M3核RT-Thread应用

1.仅提供RT-Thread的Nano版本 MCU工程在\EMPU(GW1NS-4C)_V1.2\ref_design\MCU_RefDesign\Keil_RefDesign\rt_thread_nano\PROJECT目录下&#xff0c;FPGA工程参考&#xff1a; 高云GW1NSR-4C开发板M3硬核应用-CSDN博客 特别注意&#xff0c;MCU主频&#xff08;即FPGA工程经P…

C#基础知识 - 变量、常量与数据类型篇

C#基础知识 - 变量、常量与数据类型篇 第3节 变量、常量与数据类型3.1 C#变量3.1.1 变量使用3.1.2 自定义变量3.1.2 接收用户输入 3.2 C#常量3.2.1 常量的使用 3.3 C#数据类型3.3.1 数据类型之值类型3.3.2 数据类型之引用类型 更多C#基础知识详解请查看&#xff1a;C#基础知识 …

Adaptive IBC :异构链互操作性的颠覆者

2024年第一季度&#xff0c;隐私协议 Secret Network 将会使用 Octopus Network 基于 Adaptive IBC 技术路线开发的 NEAR IBC&#xff0c;实现与 NEAR Protocol 之间将会实现首次跨链交互&#xff0c;这同样是 Cosmos 生态与 NEAR 之间的首次连接。整个加密世界正在成为一个越来…

ESP32网络编程实例-WebSocket服务器广播信息

WebSocket服务器广播信息 文章目录 WebSocket服务器广播信息1、软件准备2、硬件准备3、代码实现3.1 服务器代码实现3.2 客户端代码实现在本文中,我们将介绍如何向连接到 ESP32 服务器的所有 WebSocket 客户端广播消息。 1、软件准备 Arduino IDE在前面的文章中,如何搭建ESP32…

elasticsearch查询出现Limit of total fields 1000 has been exceeded

项目场景&#xff1a; 在项目中使用elasticsearch保存日志等相关数据&#xff0c;查询页面查询这些日志数据 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 今天在检查日志数据时&#xff0c;发现数据出不来&#xff0c;检查后端日志&#xff0c;发现一直…

【lesson14】MySQL表的基本查询retrieve(读取)1

文章目录 表的基本操作介绍retrieveselect列建表基本测试 where子句建表基本测试 表的基本操作介绍 CRUD : Create(创建), Retrieve(读取)&#xff0c;Update(更新)&#xff0c;Delete&#xff08;删除&#xff09; retrieve select列 建表 基本测试 插入数据 全列查询 …

深度学习记录--矩阵维数

如何识别矩阵的维数 如下图 矩阵的行列数容易在前向和后向传播过程中弄错&#xff0c;故写这篇文章来提醒易错点 顺便起到日后查表改错的作用 本文仅作本人查询参考(摘自吴恩达深度学习笔记)

C++标准模板(STL)- 算法库

算法库提供大量用途的函数&#xff08;例如查找、排序、计数、操作&#xff09;&#xff0c;它们在元素范围上操作。注意范围定义为 [first, last) &#xff0c;其中 last 指代要查询或修改的最后元素的后一个元素。 有制约算法 C20 在命名空间 std::ranges 中提供大多数算法的…

laravel5.5 里面如果想要使用自定义的数据库连接器

由于项目里面使用到了doris&#xff0c;虽然doris支持mysql协议&#xff0c;但是如果直接把他当mysql使用是行不通的&#xff0c;因为doris并不支持mysql的一些option和mode设置&#xff0c;然后就会一直报错&#xff1a; SQLSTATE[HY000]: General error: 2013 Lost connecti…

前端常用去重的几种方式

文章目录 方式1: ES6新语法方式2: 遍历 利用filter方式3: 使用 new Map() for循环方式4: 利用 hasOwnProperty总结 在github 查看该文章 方式1: ES6新语法 过滤出网页中不重复的html标签 结合去重知识点考查 […new Set([…document.querySelectorAll(‘*’)].map(v>v.t…

分布式锁,进程锁,线程锁

线程锁:大家都不陌生&#xff0c;主要用来给方法、代码块加锁。当某个方法或者代码块使用锁时&#xff0c;那么在同一时刻至多仅有有一个线程在执行该段代码。当有多个线程访问同一对象的加锁方法/代码块时&#xff0c;同一时间只有一个线程在执行&#xff0c;其余线程必须要等…

Vue使用Canvas实现电子签名功能示例

当使用Vue来实现电子签名功能时&#xff0c;可以结合Canvas元素和Vue的数据绑定功能来实现。下面是一个简单的示例&#xff0c;演示了如何在Vue中使用Canvas实现电子签名功能&#xff1a; <template><div><!-- Canvas元素用于绘制电子签名 --><canvasref…

bigdecimal比较大小

bigdecimal比较大小 大家好&#xff0c;我是微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;在日常的Java开发中&#xff0c;我们经常会涉及到对数字进行比较&#xff0c;而BigDecimal作为一种高精度的数值类型&#xff0c;其…

06 使用v-model实现双向数据绑定

概述 Vue achieves two-way data binding by creating a dedicated directive that watches a data property within your Vue component. The v-model directive triggers data updates when the target data property is modified on the UI. Vue 通过创建一个专用指令来观…

IntelliJ IDEA 自带HTTP Client接口插件上传文件示例

如何使用IntelliJ IDEA自带的HTTP Client接口插件进行文件上传的示例。在这个示例中&#xff0c;我们将关注Controller代码、HTTP请求文件&#xff08;xxx.http&#xff09;&#xff0c;以及文件的上传和处理。 Controller代码 首先&#xff0c;让我们看一下处理文件上传的Co…

第15章 《乐趣》Page305~311, 代码精简以后,讨论一下引用含义的问题

将Page305~311的代码精简了一下&#xff0c;讨论一下引用含义的问题&#xff0c;精简之后的代码如下&#xff1a; #include <iostream> #include <SDL2/SDL.h>using namespace std;namespace sdl2 {char const* last_error() {return SDL_GetError(); }struct Ini…