请确认下以下【引入React Three Fiber】在本地可以正常工作，但在生产环境中却出现停止的问题，希望注意的要点

2 年 ago
雅, 悟
3 minutes

你好。我是一个刚入门的编程初学者Sarasa。
当我们开始熟悉使用React时，会对其丰富的库感到惊讶。
如果我们想要完成某个操作，使用这个库就可以轻而易举地实现！

当我刚考虑尝试进入3D动画领域的时候，我意外地遇到了react three fiber。

这篇文章描述了作者在错误代码中苦苦挣扎的情况。
我想你可能会想插一句话说：”哎呀，你不会忘了那个地方吧？”，但是我希望你能轻松地忽略那个地方。故事有个结局。

【开发环境】
＜框架＞
React 版本 18.2.0 (Create-react-app )

语言使用:
JavaScript
CSS
HTML

React Three Fiber 是什么来的？

react three fiber是一个能够在React上以声明性的方式写出JavaScript库之一Three.js的代码的库。
它不仅代码量少，而且易读易用也是它的魅力之一。
那么接下来，让我们按照官方指引，立即开始安装这个库吧。

在中国境内，仅需要一种选项：npm安装three @react-three/fiber。

另外，我还会把drei一并添加进去，它能够补充完善react three fiber的功能。

使用npm安装@react-three/drei模块。

虽然期望它能成为时尚设计，并充满了兴奋，但为什么会出现这样的情况呢？

我参考了这里的代码编写方式。非常感谢您的明确易懂和精彩的视频！！

因为正好正在制作一个介绍兴趣摄影的网站，所以想要在一个时尚的页面上展示照片！我尝试写了一些代码。

/** @jsxImportSource @emotion/react */
import {css }  from '@emotion/react'
import Header from './compornent/header';
import Footer from './compornent/footer';
import Sidebar from './compornent/sidebar';
import { Image, Scroll, ScrollControls } from '@react-three/drei'
import { Canvas, useThree } from '@react-three/fiber';



function Images() {
  const {width,height}=useThree((state)=> state.viewport)
  return (
    <>
    <group>
      
        <Image url="./1.jpg" scale={[1,height,1]} position={[0, 0, 1]} />
        <Image url="./2.jpg" scale={[1,6,6]} position={[1.6, 0, 3]} />
        <Image url="./3.jpg" scale={[1,3.5,1]} position={[2 ,-height, 2]} />
        <Image url="./4.jpg" scale={[1.4, 2, 1]} position={[-1.3,-height,3.2]} />
        <Image url="./5.jpg" scale={[1, 1, 1]} position={[-1,0,4]} />
       
    </group>
    </>
  );
}


function Photoanime() {
    return (
      <>
      <div css={size}>
      <Sidebar/>
      <Header/>
      
      <Canvas>
        <ScrollControls pages={2} damping={3}>
          <Scroll>
           
          
        <Images/>
      
        </Scroll>

        <Scroll html>
          <div css={font}>
            <p>街が、</p>
            <p>私の世界を</p>
            <p>広げてくれた</p>
          </div>
        </Scroll>
        </ScrollControls>
    
      // </Canvas>
    
      <Footer/>
        </div>
      </>
    )
  }

  const size =css({
    backgroundColor:'aliceblue',
    width:'100vw',
    height:'100vh',
    margin:'0',
    padding:'0',
    display: 'flex',
    flexFlow: 'column',
     minHeight: '100vh'
  
  })

  const font =css({
    fontFamily: 'Noto Sans JP',
    fontSize: '4em',
    fontWeight: '400',
    letterSpacing: '0.1em',
    lineHeight: '0.5em',
     margin: '0',
     padding: '0',
     position:'absolute',
     top:'30vh',
     left:'1.5em',
     flexFlow: 'column',
     display: 'flex',
     whiteSpace: 'nowrap',
    
  })
  
  

export default Photoanime
表示させたいサイト.png

传统的纯白页面

我认为读过以前文章的人可能会猜到，我又一次遇到了一张空白页面。

NowLoading.png

假设没有路由问题，则应该是react three fiber周边引起的。暂时先做如此推测。

    • 「Now　Loading・・」と「Hello world!」のみのCompornentを繋げてみる

 

    • →表示される

 

    • 「Hello world!」を直接Routerに繋ぐ→表示される

Photoanimeを直接Routerに繋ぐ→表示されない
これらの検証の結果、仮設の通りreact three fiber周辺に問題があることがわかりました。また、ローカルではきちんと表示されていることから、buildの過程に問題があることは言うまでもありません。

于是，我决定利用Vercel来观察构建过程。

哎呀？有未安装的库吗？

warning.png
warning切り抜き.png

我先检查一下package.json文件。

"dependencies": {
    "@emotion/react": "^11.10.4",
    "@react-three/drei": "^9.32.4",
    "@react-three/fiber": "^8.8.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "normalize.css": "^8.0.1",
    "react": "^18.2.0",
    "react-burger-menu": "^3.0.8",
    "react-dom": "^18.2.0",
    "react-responsive": "^9.0.0",
    "react-router-dom": "^6.4.0",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.4",
    "react-spring": "^9.5.4",
    "web-vitals": "^2.1.4"
  },

确实找不到three。
嗯？？但我记得以前安装过npm install three @react-three/fiber。。。

エラー祭り.png

因为已经安装了@react-three/fiber和@react-three/drei，所以我尝试安装npm install three。嘿！

完了.png

为了确保准确，再次检查package.json文件。

  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@react-three/drei": "^9.32.4",
    "@react-three/fiber": "^8.8.7",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "normalize.css": "^8.0.1",
    "react": "^18.2.0",
    "react-burger-menu": "^3.0.8",
    "react-dom": "^18.2.0",
    "react-responsive": "^9.0.0",
    "react![NowLoading.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2863909/0383158f-0dee-a95e-3506-f6b725e7c374.png)
-router-dom": "^6.4.0",
    "react-scripts": "5.0.1",
    "react-spinners": "^0.13.4",
    "react-spring": "^9.5.4",
    "three": "^0.145.0", //threeが追加されました//
    "web-vitals": "^2.1.4"
  },

确认已经被正确地添加了。
我会再次运行npm run build以确认。

表示させたいサイト.png

为什么没有安装Three？

对于这个问题，我们还在验证中，但可能是因为在Create-react-app中进行环境设置的原因吧？我们认为，尽管可以通过一个命令轻松搭建环境，但与webpack相比，在某些方面它的自由度较低。

因为我误以为从官方复制粘贴了npm install three @react-three/fiber，所以应该能够顺利运行，这是导致问题的最大原因。另外，所有的网站都安装了three.js、@react-three/fiber和@react-three/drei，完全忽略了three.js作为基础的知识。

不仅仅是因为”听起来很有意思，就引入了！”，似乎还有必要认真研究每个库的历史。

此外，我认为未仔细检查终端错误显示并继续开发的部分也是应该反省的要点。

我希望能够在继续按照现有方式，先行动起来→产生兴趣→提出假设、验证、调查→取得成功→进行反思的同时，也能够稳固基础部分。

参考页面

驚人地简单地构建3D场景！尝试使用React Three Fiber
https://liginc.co.jp/587025

使用react-three-fiber体验React中的3D表现！

React-three-fiber是一个用于three.js的React渲染器。

让我们用React和Three.js来制作一个3D滚动网站（React Three Fiber）。（附视频链接：https://www.youtube.com/watch?v=J9t9Vmw6xSQ）

Vercel https://vercel.com/home 冯宅

✖
广告
将在 10 秒后关闭
bannerAds