React 三 React, canvas 没有响应

Question

我正在为 Fiber Three 画布的响应能力而苦苦挣扎。

确实，当我用其他东西替换 Canvas 时......好吧，一切似乎都是 响应和工作
Without canvas, every thing seems good

Added the canvas

这是 App.js 代码：

import React from "react";
import Scene from "./Scene";

export default function MainTitle() {
  return (
    <section className="flex flex-auto justify-center items-center w-full h-screen bg-orange-500">
      <div className="flex-row-reverse flex-auto w-1/2 h-full lgs:flex" >

        {/* 3D avatar's face */}
        <div className="w-auto h-2/3 bg-blue-900 lgs:w-1/2 lgs:h-full" name="avatar_face">
          <div style={{ width: "100%", height: "100%" }}>
            <Scene/>
          </div>
        </div>
        
        
        {/* Greetings */}
        <div className="w-auto h-1/3 bg-blue-400 lgs:bg-red-400 lgs:w-1/2 lgs:h-full"  name="greetings">
          hello
        </div>
      </div>

  </section>
  );
}

这是 Scene.js 文件：

import React, { Suspense, useEffect, useRef } from 'react';
import { Canvas } from '@react-three/fiber';
import { Model } from './Avatar'

export default function Scene() {

  return (
    <Canvas
      camera={{ position: [2, 0, 12.25], fov: 15 }}
      style={{
        backgroundColor: '#111a21',
      }}
      updateDefaultCamera ={true}
    >
      <ambientLight intensity={1.25} />
      <directionalLight intensity={0.4} />
      <mesh scale={5} position={[1.17, -2.48, 0]}>
        <Suspense fallback={null}>
          <Model position={[-0.12, -0.1, 0.7]} /> /* highlight-line */
        </Suspense>
      </mesh>
    </Canvas>
  );
}

Answer 1

在你的 App.js 文件中替换这一行

和