搭建本地开发环境

npx create-react-app react-three-demo
  • 删除掉新项目中 src/ 文件夹下的所有文件。(不要删除整个 src 文件夹,删除里面的源文件。)

  • 安装路由依赖包和threejs依赖包

# tips: 注意版本兼容问题
npm install react-router@5 react-router-dom@5 npm install --save three
  • 按照下面目录结构创建文件
-public
└─src
├─assets
│ └─styles
├─routers
│ └─index.js
└─views
│ ├─home.js
│ └─demo.js
├─index.js // 入口文件
├─app.js // 主文件

组件和路由文件

  • 路由文件
import { Route } from 'react-router-dom'
import Index from '../views/index'
import Demo from '../views/demo' // 路由配置
const Routes = [
{
path: '/',
exact: true,
component: Index
},
{
path: '/Demo',
exact: true,
component: Demo
}
] function AppRouter() {
return (
<main>
{Routes.map((item, index) => {
return <Route key={index} path={item.path} exact={item.exact} component={item.component}></Route>
})}
</main>
)
} export default AppRouter
  • 入口文件index.js
import React from 'react'
import ReactDOM from 'react-dom/client' import './assets/styles/base.css'
import App from './App' const root = ReactDOM.createRoot(document.getElementById('root'))
// 注意,不要使用严格模式去渲染,否则会导致 componentDidMount 钩子执行两次
root.render(<App />)
  • app.js
import { BrowserRouter as Router, Link } from 'react-router-dom'
import AppRouter from './routers' function App() {
return (
<Router>
<div className="App">
<nav>
<Link to="/">首页</Link>
<Link to="/Demo">demo</Link>
</nav> <AppRouter></AppRouter>
</div>
</Router>
)
} export default App
  • 首页 home.js
import { Component } from 'react'
import * as THREE from 'three'
// import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' export default class Index extends Component {
render() {
return <div id="stage"></div>
} /**
* @Description: 组件挂载完成
* @return {*}
*/
componentDidMount() {
this.init()
this.animate()
} /**
* @Description: 初始化
* @return {*}
*/
init = () => {
this.scene = new THREE.Scene()
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / (window.innerHeight - 33), 0.1, 1000) this.renderer = new THREE.WebGLRenderer()
this.renderer.setSize(window.innerWidth, window.innerHeight - 33)
document.getElementById('stage').appendChild(this.renderer.domElement) const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
this.cube = new THREE.Mesh(geometry, material)
this.scene.add(this.cube) this.camera.position.z = 5
} /**
* @Description: 旋转动画
* @return {*}
*/
animate = () => {
requestAnimationFrame(this.animate)
this.cube.rotation.x += 0.01
this.cube.rotation.y += 0.01
this.renderer.render(this.scene, this.camera)
}
}

package.json文件

{
"name": "react-three-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "set PORT=8888 && react-scripts start",
"build": "react-scripts build"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^5.3.3",
"react-router-dom": "^5.3.3",
"react-scripts": "5.0.1",
"three": "^0.143.0",
}
}

备注

搞这个小demo的过程中遇到一些问题,总结如下:

  1. nodejs版本要足够新,否则可能创建项目不成功

  2. npx create-react-app创建项目报错(不报错的忽略)

    npm ERR! code ENOLOCAL
    npm ERR! Could not install from "Files\nodejs\node_cache\_npx\1452" as it does not contain a package.json file. npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Program Files\nodejs\node_cache\_logs\2022-08-04T14_46_10_318Z-debug.log
    Install for create-react-app@latest failed with code 1
    解决方法:
    检查本地用户下的 .npmrc 文件配置,去掉config配置,重新创建项目即可。
    如果还不行那就重新安装node吧
  3. 路由报错,页面空白

    Uncaught Error: Invariant failed: You should not use <Switch> outside a <Router>
    那可能是react-router和react-router-dom的版本不兼容,或者是路由位置放错了。
    本文使用的 v5 版本,写法可以参考本文路由文件也可自己尝试其他方式。
  4. threejs创建的3D图形,canvas渲染出现两个

    // 注意入口文件中使用的是严格模式,导致 componentDidMount 钩子执行两次,init函数执行两次造成的
    // 解决方法:要么去掉严格模式,要不操作dom控制只有一个canvas元素,本文使用第一种方法
    root.render(
    <React.StrictMode>
    <App />
    </React.StrictMode>
    )
    // 解决方法一
    root.render(<App />)
  5. 使用threejs 做demo过程中注意,方法使用箭头函数方便定义和使用变量,定义变量可以直接放在当前实例上。

reactjs中使用threejs从0到1的更多相关文章

  1. Eclipse中部署hadoop2.3.0

    1 eclipse中hadoop环境部署概览 eclipse 中部署hadoop包括两大部分:hdfs环境部署和mapreduce任务执行环境部署.一般hdfs环境部署比较简单,部署后就 可以在ecl ...

  2. 宏定义中使用do{}while(0)的好处 (转载)

    宏定义中使用do{}while(0)的好处   #define MACRO_NAME(para) do{macro content}while(0)   的格式,总结了以下几个原因:   1,空的宏定 ...

  3. VS2015预览版中的C#6.0 新功能(二)

    VS2015预览版中的C#6.0 新功能(一) VS2015预览版中的C#6.0 新功能(三) 自动属性的增强 只读自动属性 以前自动属性必须同时提供setter和getter方法,因而只读属性只能通 ...

  4. VS2015预览版中的C#6.0 新功能(三)

    VS2015预览版中的C#6.0 新功能(一) VS2015预览版中的C#6.0 新功能(二) Using static 使用using StaticClass,你可以访问StaticClass类里的 ...

  5. VS2015预览版中的C#6.0 新功能(一)

    VS2015预览版中的C#6.0 新功能(二) VS2015预览版中的C#6.0 新功能(三) VS2015的预览版在11月12日发布了,下面让我们来看看C#都提供了哪些新的功能. 字符串添写(Str ...

  6. 输入框中的空"",0,null的判断

    改了一个小项目,里面有一个小的问题他们是这样提需求的.两个输入框,第一个输入框里面,输入的内容会对第二个输入框中的内容产生影响.具体是这样的:如果第一个输入框中的值不是“0”,那么第二个输入框就不能填 ...

  7. Mybatis中 Integer 值为0时,默认为空字符串的解决办法。

    需求是查询级别为0的用户 User对象里的level字段的值为0,查询时居然没有查到为level为0的用户. <select id="selectSelective" par ...

  8. 数组中&a与&a[0]的区别 转载自http://blog.csdn.net/FX677588/article/details/74857473

    在探讨这个问题之前,我们首先来看一道笔试题,如下: [摘自牛客网]下列代码的结果是:(正确答案是 C) main() { int a[5]={1,2,3,4,5}; int *ptr=(int *)( ...

  9. IIS7.5中调试.Net 4.0网站出现无厘头500错误的解决办法 (转)

    刚刚 部署了ii7的dll的有x86写的,就会出现以下这样的问题 iis 7 x86,Could not load file or assembly 'Name' or one of its depe ...

  10. 无法安装Java,以下开关中存在错误:“0”

    无法安装Java,以下开关中存在错误:“0”:. 解决方法:以管理员运行

随机推荐

  1. SQL Server 复制系列(文章索引)

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 前言(Introduction) 复制逻辑结构图(Construction) 系列文章索引(Catalog) 总结&am ...

  2. find / -type f -name "*fetion*" |xargs rm -rf {}\

    find / -type f -name "*fetion*" |xargs rm -rf {}\

  3. netsh命令

    C:\Windows\System32>netsh interface ipv6 show address level=verbose 地址 ::1 参数-------------------- ...

  4. PHP错误报告级别及调整方法

    运行PHP脚本时,PHP解析器会尽其所能能报告它遇到的问题.在PHP中错误报告的处理行为,都是通过PHP的配置文件php.ini中有关的配置指令确定的.另外PHP的错误报告有很多种级别,可以根据不同的 ...

  5. 检查Linux Bash安全漏洞以及各环境修复解决方法

    第一.检测是否存在Bash漏洞$env x='() { :;}; echo vulnerable' bash -c "echo this is a test"如果返回以下内容:则请 ...

  6. [bzoj4245][ONTAK2015]OR-XOR

    来自FallDream的博客,未经允许,请勿转载,谢谢. 给定一个长度为n的序列a[1],a[2],...,a[n],请将它划分为m段连续的区间,设第i段的费用c[i]为该段内所有数字的异或和,则总费 ...

  7. 初学web前端

    菜鸟刚入门,说说最近学习的心得吧. 首先我学前端主要是因为前端可以看到一些东西,比较有趣 好玩.相比其他语言更简单一些 ,但是却没有那么枯燥. 刚刚开始学习前端肯定就是html+css了.我是混着学的 ...

  8. 微信H5开发

    1,line-height  不垂直居中 解决方法:用padding写高度 2,手指滑动事件    touchmove 3,页面滚动事件:touchmove 4,要写不同手机适配的基数font-siz ...

  9. 云服务器--linux系统操作命令以及安装ngnix记录,以及手动部署本地文件

    1.控制台登陆服务器,需要首先知道服务器ip和密码,,命令是 ssh root@1.1.1.1(服务器IP),然后输入密码登入服务器 2.查看linux 版本的系统命令是 cat /etc/redha ...

  10. GoldenGate 12.3 MA架构介绍系列(4)–Restful API介绍

    OGG 12.3 MA中最大的变化就是使用了restful api,在前面介绍的各个服务模块,其实就是引用restful api开发而来,这些API同时也提供对外的集成接口,详细接口可参考: http ...