reactjs中使用threejs从0到1

搭建本地开发环境

安装nodejs
按照 Create React App 安装指南创建一个新的项目

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的过程中遇到一些问题，总结如下：

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

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吧

路由报错，页面空白

Uncaught Error: Invariant failed: You should not use <Switch> outside a <Router>

那可能是react-router和react-router-dom的版本不兼容，或者是路由位置放错了。

本文使用的 v5 版本，写法可以参考本文路由文件也可自己尝试其他方式。

threejs创建的3D图形，canvas渲染出现两个

// 注意入口文件中使用的是严格模式，导致 componentDidMount 钩子执行两次，init函数执行两次造成的

// 解决方法：要么去掉严格模式，要不操作dom控制只有一个canvas元素，本文使用第一种方法

root.render(

  <React.StrictMode>

    <App />

  </React.StrictMode>

)

// 解决方法一

root.render(<App />)

使用threejs 做demo过程中注意，方法使用箭头函数方便定义和使用变量，定义变量可以直接放在当前实例上。

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

Eclipse中部署hadoop2.3.0
1 eclipse中hadoop环境部署概览 eclipse 中部署hadoop包括两大部分:hdfs环境部署和mapreduce任务执行环境部署.一般hdfs环境部署比较简单,部署后就可以在ecl ...
宏定义中使用do{}while(0)的好处（转载）
宏定义中使用do{}while(0)的好处 #define MACRO_NAME(para) do{macro content}while(0) 的格式,总结了以下几个原因: 1,空的宏定 ...
VS2015预览版中的C#6.0 新功能（二）
VS2015预览版中的C#6.0 新功能(一) VS2015预览版中的C#6.0 新功能(三) 自动属性的增强只读自动属性以前自动属性必须同时提供setter和getter方法,因而只读属性只能通 ...
VS2015预览版中的C#6.0 新功能（三）
VS2015预览版中的C#6.0 新功能(一) VS2015预览版中的C#6.0 新功能(二) Using static 使用using StaticClass,你可以访问StaticClass类里的 ...
VS2015预览版中的C#6.0 新功能（一）
VS2015预览版中的C#6.0 新功能(二) VS2015预览版中的C#6.0 新功能(三) VS2015的预览版在11月12日发布了,下面让我们来看看C#都提供了哪些新的功能. 字符串添写(Str ...
输入框中的空""，0，null的判断
改了一个小项目,里面有一个小的问题他们是这样提需求的.两个输入框,第一个输入框里面,输入的内容会对第二个输入框中的内容产生影响.具体是这样的:如果第一个输入框中的值不是“0”,那么第二个输入框就不能填 ...
Mybatis中 Integer 值为0时，默认为空字符串的解决办法。
需求是查询级别为0的用户 User对象里的level字段的值为0,查询时居然没有查到为level为0的用户. <select id="selectSelective" par ...
数组中&a与&a[0]的区别转载自http://blog.csdn.net/FX677588/article/details/74857473
在探讨这个问题之前,我们首先来看一道笔试题,如下: [摘自牛客网]下列代码的结果是:(正确答案是 C) main() { int a[5]={1,2,3,4,5}; int *ptr=(int *)( ...
IIS7.5中调试.Net 4.0网站出现无厘头500错误的解决办法 (转)
刚刚部署了ii7的dll的有x86写的,就会出现以下这样的问题 iis 7 x86,Could not load file or assembly 'Name' or one of its depe ...
无法安装Java，以下开关中存在错误：“0”
无法安装Java,以下开关中存在错误:“0”:. 解决方法:以管理员运行

随机推荐

屌丝giser成长记-大学篇
作为一名屌丝giser的我,刚接触gis专业是2007年的大一,好悲催,当时gis这个专业是被调剂的,我压根都不知道gis为何物,那时候gis冷门的一逼,报名这个专业的寥寥无几.记得那时候得知被调剂到 ...
jQuery中10个非常有用的遍历函数
使用jQuery,可以很容易的选择HTML元素.但有些时候,在HTML结构较为复杂时,提炼我们选择的元素就是一件麻烦的事情.在这篇教程中,我们将探讨十种方法去精炼和扩展我们将要操作的集合. HTM ...
Java多态性理解
Java中多态性的实现什么是多态面向对象的三大特性:封装.继承.多态.从一定角度来看,封装和继承几乎都是为多态而准备的.这是我们最后一个概念,也是最重要的知识点. 多态的定义:指允许不同类的对 ...
【JS】依据表格ID进行排序（附凝视）
分享一个前端做的依据表格ID进行排序的方法哈,贴码例如以下: HTML: <input type="button" id="btn1" value=&qu ...
CCTV5 前端
get : fre = 11868 symbolrate = 27500 pls_n=0------167 CCTV 9------------168 CCTV 3--------- ...
2019OO第二单元总结
(1)设计策略电梯第1次作业是一个傻瓜调度电梯,使用先来先服务原则,不用考虑捎带(可以认为电梯的载客量为1),因此比较简单,调度器用一个队列就可以. 使用生产者-消费者模型,输入线程是生产者,电梯是 ...
python写算法中的栈
########### 栈的使用 ############### class StackFullError(Exception): pass class StackEmptyError(Excepti ...
五分钟让你读懂UML常见类图
相信各位同学在阅读一些源码分析类文章或是设计应用架构时没少与UML类图打交道.实际上,UML类图中最常用到的元素五分钟就能掌握,经常看到UML类图但还不太熟悉的小伙伴赶紧来一起认识一下它吧:) 一 ...
spring boot 通过controller跳转到指定 html 页面问题以及请求静态资源问题
1. 项目结构 2. pom文件配置重点是红色框内的依赖 3. application配置文件 4. controller 注意使用@Controller注解: @RestController 等价 ...
20165211 2017-2018-2 《Java程序设计》第5周学习总结
20165211 2017-2018-2 <Java程序设计>第5周学习总结教材学习内容总结本周,我学习了书本上第五.六两章的内容,以下是我整理的主要知识. 第五章内部类与异常类内 ...

reactjs中使用threejs从0到1

搭建本地开发环境

组件和路由文件

package.json文件

备注

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

随机推荐

热门专题