chuGuoYuJian/code/src/pages/A0model/index.tsx

import React, { Suspense } from 'react'
import styles from './index.module.scss'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import classNames from 'classnames'
// import * as THREE from 'three'
import { Canvas } from '@react-three/fiber'
import SceneSetup from './SceneSetup'
import Model from './Model'
import A0btn from './A0btn'

function A0model() {
  const { isShow } = useSelector((state: RootState) => state.A0model)

  return (
    <div
      style={{ backgroundImage: `url(${serverUrl}0/0_bac.jpg)` }}
      className={classNames(styles.A0model, isShow ? styles.A0modelShow : '')}
    >
      <Canvas
        shadows
        camera={{ position: [0, 1000, 5], fov: 50 }}
        gl={{
          antialias: true, // 开启抗锯齿，使边缘更平滑
          alpha: true // 允许 Canvas 背景透明
        }}
        // onCreated={({ gl }) => {
        //   gl.setClearColor(new THREE.Color(0x000000))
        // }}
      >
        <Suspense>
          {/* 场景与控制器 */}
          <SceneSetup />
          <Model />
        </Suspense>
      </Canvas>

      <A0btn />
    </div>
  )
}
const MemoA0model = React.memo(A0model)

export default MemoA0model