React Three React，画布没有响应

Question

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

事实上，当我用其他东西代替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文件中，替换第9行的宽度：100vw和高度：100vh。